Question

我是D3的新手，我有一个与在图表中添加缩放相关的问题。

我用缩放/平移建立了一个散点图，一切正常，除了我在图表上使用缩放时，我可以看到图表“区域”之外的一些点，我真的想避免这种情况。 / p>

缩放行为如下所示：

var zoom = d3.behavior.zoom()
            .x(xScale)
            .y(yScale)
            .scaleExtent([1, 10])
            .on("zoom", zoomed);

缩放功能如下：

function zoomed() {
    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;

    panY = panY > 10 ? 10 : panY;
    var maxY = -(scale-1)*height-10;
    panY = panY < maxY ? maxY : panY;

    zoom.translate([panX, panY]);


    main.select(".x.axis").call(xAxis);
    main.select(".y.axis").call(yAxis);
    main.selectAll("circle")
        .attr("cx", function (d,i) { return xScale(d[0]); } )
        .attr("cy", function (d) { return yScale(d[1]); } )
        .attr("r", 5);
}

您可以看到一个有效的示例（以及所有代码）here

有没有办法可以定义缩放范围的“区域”，因此该区域外的任何点都不可见？或者我可以在缩放功能中添加一些东西来解决这个问题吗？

非常感谢。

Answer 1

一种选择是限制使用剪辑路径绘制点的元素的g区域

有关代码，请参阅http://jsfiddle.net/henbox/duwyay3y/1/。

首先定义剪辑路径：

var clip = main.append("defs").append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("id", "clip-rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr('width', width)
    .attr('height', height);

然后添加到g元素

main.append("g").attr("clip-path", "url(#clip)")
    .selectAll("circle")
    ...

D3散点图 - 缩放后图表外的可见点

1 个答案: