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

我將g元素添加到基本SVG中，以將所有內容組合在一起（也將其他任何元素附加到了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);

這是工作示例。