javascript - d3 v2 防止在视口(viewport)外缩放和平移图表

Question

我一直在查看我能找到的所有处理此问题的示例，并且我一直在尝试让它与我的图表一起使用，但到目前为止没有成功。

我的图表平移和缩放行为正常工作，但目前我可以平移和缩放图表内容到视口(viewport)边界之外。

你可以在这个 fiddle 中看到这个演示:

http://jsfiddle.net/Jammer/wvL422zq/

我想做的就是防止极端的数据被完全滚动到 View 之外，它们似乎有太多完全不同的例子来让它起作用，以至于我正在努力寻找适用的方法我的图表。

目前处理平移和缩放:

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。

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

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); });
        });