Question

我一直在查看我能找到的所有可以解决这个问题的例子，而且我一直试图让这个与我的图表一起使用，但到目前为止还没有成功。

我有图表平移和缩放行为，但目前我可以在视口范围之外平移和缩放图表的内容。

你可以在这个小提琴中看到这个演示：

我试图做的就是防止极端数据被完全滚出视图，并且它们看起来是如此多的完全不同的示例，让我发挥作用，我正在努力获得该方法这将适用于我的图表。

目前正在处理平移和缩放：

var zoom = d3.behavior.zoom()
    .x(x)
    .scaleExtent([1, 30])
    .scale(2)
    .on("zoom", function () {
        svg.select(".x.axis").call(xAxis);
        svg.selectAll("path.lines")
           .attr("d", function(d) { return line(d.values); });
        svg.selectAll("circle")           
           .attr("cx", function(d) { return x(d.date); })                              
           .attr("cy", function(d) { return y(d.value); });
    });

其中很多例子似乎也适用于旧版本或更新版本的d3。

如何防止图表内容被缩放或平移出视口？

Answer 1

您可以在缩放功能中限制平移。我只在一边做过。您可能希望将比例用于另一方。我留给你。这是我的solution. 编辑：我也做了另一面。这很棘手。

    var zoom = d3.behavior.zoom()
        .x(x)
        .scaleExtent([1, 30])
        .scale(2)
        .on("zoom", function () {
            var panX = d3.event.translate[0];
            var panY = d3.event.translate[1];
            var scale = d3.event.scale;

            panX = panX > 10 ? 10 : panX;
            var maxX = -(scale-1)*width-10;
            panX = panX < maxX ? maxX : panX;
            zoom.translate([panX, panY]);
            console.log("x: "+panX+" scale: "+scale);
            //console.log("x: "+(panX/scale));

            svg.select(".x.axis").call(xAxis);
            svg.selectAll("path.lines")
                .attr("d", function(d) { return line(d.values); });
            svg.selectAll("circle")           
                .attr("cx", function(d) { return x(d.date); })                              
                .attr("cy", function(d) { return y(d.value); });
        });

d3 v2防止在视口外部缩放和平移图表

1 个答案: