Question

我正在尝试在D3图表上进行缩放。

我目前已经找到了一个解决方案，使我的缩放工作同时具有一个有序的x轴，但我有麻烦让x轴缩放与圆形和方形元素匹配。放大的越多，就越不合适＃34;他们成了。

这是我当前代码的JS小提琴，我试图实现缩放。

http://jsfiddle.net/Vanquiza/c794g977/3/

我想知道如何正确实现缩放，以避免元素不合适。

我已经粘贴了缩放功能：

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomHandler);

function zoomHandler() {
    var translate = zoom.translate(),
    scale = zoom.scale();

    var tx = Math.min(0, Math.max(width * (1 - scale), translate[0]));
    var ty = Math.min(0, Math.max(height * (1 - scale), translate[1]));

    zoom.translate([tx, ty]);

    //svg.select(".x.axis").call(xAxis);
    svg.selectAll(".circleNodes")
        .attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)");

    svg.selectAll(".squareNodes")
        .attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)");

    svg.select(".x.axis").attr("transform", "translate(" + d3.event.translate[0]+","+(height)+")")
        .call(xAxis.scale(x.rangeRoundBands([0, (width * d3.event.scale)],1 * d3.event.scale)));

}

任何帮助都非常有用！

Answer 1

完全删除转换。所有调整都可以通过修改序数量表来完成，从而解释那里的翻译。

x.rangeBands([d3.event.translate[0], d3.event.translate[0]+(width * d3.event.scale)], 1)

（切换到使用rangeBands()而不是rangeRoundBands()来消除抖动。）

然后你只需要调整所有圆圈和方块的位置，然后根据这个新的比例重新渲染轴。

svg.select(".x.axis").call(xAxis)
circle.attr("cx", function(d){ return x(d);})
square.attr("x", function(d){ return x(d) - squareSize/2;})

这是工作jsFiddle

如何使用D3.js正确缩放？

1 个答案: