Question

我最近发现了如何在D3js图上添加缩放行为。用鼠标滚动放大和缩小非常酷。

我在svg上添加了一个g元素zoomy，在第一个g上添加了一个g，我绘制了图形的所有节点。

在：

var vis = d3.select("body").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .attr("id","canvasd3")
        .append("g");

后：

var vis = d3.select("body").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .attr("id","canvasd3")
        .append("g")
        .attr("id","zoomy")
        .append("g");

我添加了缩放和重绘功能：

var zoom = d3.select("#canvasd3")
                     .call(d3.behavior.zoom().scaleExtent([.5, 3]).on("zoom",redraw)).on("dblclick.zoom", null);



    function redraw() { 
        d3.select("#zoomy")
        .attr("transform", "translate(" + (d3.event.translate) + ")" + " scale(" + d3.event.scale + ")"); 
    }

现在我遇到的问题是d3js库的第3版。当我使用版本2时，节点可以像在缩放behjaviour之前一样拖动，但是当你尝试拖动一个节点时，在d3.v3.js上，整个图形被拖动，这真的很烦人。

尝试使用相同的代码拖动两个链接上的节点，但使用不同的库（请参阅外部资源）版本，以便您可以看到问题所在：

版本2 d3js库（良好的拖动行为）：http://jsfiddle.net/Yx8SD/

版本3 d3js库（糟糕的拖动行为）：http://jsfiddle.net/t4Ubb/

我不知道我需要修改哪些属性才能像第2版那样工作，是否可以使用这种缩放和图形？我真的想使用D3js的新版本3。我已经疯了......

P.S。我已经描述了缩放附加组件，因为没有这个选项，图形和节点的拖动就像它应该的那样工作，所以问题就在于这个缩放功能。

欢迎任何建议或帮助

d3js强制导向图，缩放行为和D3库的不同版本

0 个答案: