Question

我有一个带有固定节点的力导向图。我允许放大图表：

var force = d3.layout.force()
         .on("tick", tick);

var zoom = d3.behavior.zoom()
    .scaleExtent([0, 50])
    .on("zoom", zoomed);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoom);

var graphGroup = svg.append("g")
                  .attr("height", graphHeight)
                  .attr("width", graphWidth)
                  .attr("class", "graph-group")
                  .attr("transform", "translate(" + margin + "," + margin + ")");

graphGroup.append("rect")
                  .attr("x", 0)
                  .attr("y", 0)
                  .attr("height", graphHeight)
                  .attr("class", "graph-limit")
                  .attr("width", graphWidth);

...

function zoomed() {
    graphContainer.attr("transform", "translate(" + t + ")scale(" + d3.event.scale + ")");
}

我想限制图表中zoom（scale和translation）与“graph-limit”类的矩形。我试图将overflow:hidden置于风格中，但没有成功。有什么想法吗？

编辑： 这是一个jsfiddle http://jsfiddle.net/Lxc43v8d/20/

Answer 1

这就是你可以做到的。

使用尺寸与矩形完全相同的剪辑路径：

//make a clip path
svg.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("id", "clip-rect")
        .attr("x", 0)
                  .attr("y", 0)
                  .attr("height", graphHeight)
                  .attr("width", graphWidth);

对于包含矩形的组，所有节点和链接都添加像这样的剪辑路径

var graphGroup = svg.append("g")
            .attr("clip-path", "url(#clip)")//add the clip path
                  .attr("height", graphHeight)
                  .attr("width", graphWidth)
                  .attr("class", "graph-group");

工作代码here

希望这有帮助！

d3.js放大而不溢出

1 个答案: