条形图放大d3.js

Bars zoom on d3.js

本文关键字：js d3 放大 条形图      更新时间：2023-09-26

我想用d3.js制作一个直方图条垂直缩放的图表。我做错了一些事情，因为结果不是我想要的。

缩放:

   svg.selectAll('g.info-group').each(function (d, i) {
          var el = d3.select(this);
          svg.select('.bars').attr('transform', 'translate(0,' + d3.event.translate[1] + ')');
          el
           .selectAll('.bar')
           .call(function (s) {
              barSetPosition(s, d.ib, i);
           });
       });
       svg.select('.y.axis').call(yAxis);

这是一个jsFiddle

什么不工作:

  1. y轴可能为负值，在不存在值的地方可能为非常正的值。
  2. 如果我滚动条和y轴不符合彼此。

我如何纠正这个?

更新(05.19.2015):我找到了这个问题的解决方案，这里是- jsFiddle

 var zoom = d3.behavior.zoom()
    .y(yScale)
    .scaleExtent([1, 2])
    .on("zoom", function () {
       var t = zoom.translate(),
        tx = t[0],
        ty = t[1],
        scale = zoom.scale();
       ty = Math.min(ty, 0);
       ty = Math.max(ty, canvasH + margin.top - (canvasH + margin.top) * scale);
       zoom.translate([tx, ty]);
       svg
        .select('.bars')
        .attr("transform", "translate(0," + ty + ")");
       svg.selectAll('.bar')
        .attr('y', function (d) {
           return (canvasH + margin.top) * scale - (yScale(0) - yScale(d.ib));
        })
        .attr('height', function (d) {
           return yScale(0) - yScale(d.ib);
        })
        .attr('width', barScale.rangeBand());
       svg.select('.y.axis').call(yAxis);
    });

现在缩放工作良好。

但现在还有两个问题。

  1. 当我在做缩放和向下平移时，条在X轴下，轴上的数字变得隐藏。
  2. 当我悬停和缩放酒吧，然后向下平移酒吧是颤抖的。

如何解决这个问题?谢谢。

我修复了所有问题，最终代码是- jsFiddle

这是主要部分:

var zoom = d3.behavior.zoom()
    .y(yScale)
    .scaleExtent([1, 2])
    .on("zoom", function () {
       var t = zoom.translate(),
        tx = t[0],
        ty = t[1],
        scale = zoom.scale();
       ty = Math.min(ty, 0);
       ty = Math.max(ty, canvasH + margin.top - (canvasH + margin.top) * scale);
       zoom.translate([tx, ty]);
       svg
        .select('.bars')
        .attr("transform", "translate(0," + ty + ")");
       svg.selectAll('.bar')
        .attr('y', function (d) {
           return (canvasH + margin.top) * scale - (yScale(0) - yScale(d.ib));
        })
        .attr('height', function (d) {
           var height = (yScale(0) - yScale(d.ib)) - (canvasH + margin.top) * (scale - 1) - ty;
           if (height < 0) {
              height = 0;
           }
           return height;
        })
        .attr('width', barScale.rangeBand());
       svg.select('.y.axis').call(yAxis);
    });
   svg.call(zoom);
相关文章：