D3JS，当鼠标拖动空白区域时，力图不断跳跃

Question

我有个问题。

我使用了力图并为其添加了缩放。

但是当鼠标拖动空白区域时，力图不断跳跃。

喜欢这个

如何让图形不跳跃？谢谢。

(我为我的英语感到非常抱歉，再次感谢您。

这是我的缩放代码。

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);
function zoomed() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Answer 1

我在基本 SVG 中添加了一个 g 元素以将所有内容组合在一起(还将任何其他元素附加到 g 元素而不是 svg(，然后在 zoomed(( 方法中，对该 g 元素而不是 svg 元素执行转换：

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")");

缩放方法：

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

此外，在设置节点侦听器时，停止"mousedown"事件的事件传播，如下所示：

var node = g.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", click)
.on("dblclick", dblclick)
.on("mousedown", function(d) { 
  d3.event.stopPropagation();
})
.call(force.drag)
.on('click', connectedNodes);

这是工作示例。