帶有div和d3縮放的d3力圖

Question

您好Stackoverflowcommunity！ 我在以d3force定向的圖形中運行d3縮放時遇到問題。 我可以實現它正在縮放和平移，但是這樣做破壞了節點和鏈接之間的對齊，而且我不知道該如何解決...。我創建了一個小提琴，顯示了我的意思。 https://jsfiddle.net/5jgrf5h8/5/

這是我執行縮放的代碼：

svg.call(d3.zoom()
  //.scaleExtent([1 / 2, 4])
  .on("zoom", zoomed))
.on("dblclick.zoom", null);
//.on("wheel.zoom", null);

function zoomed() {
  //link.attr("transform", d3.event.transform);
  link.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")");
  node.style("transform", "translate(" + d3.event.transform.x + "px," + d3.event.transform.y + "px) scale(" + d3.event.transform.k + ")");

  simulation.alphaTarget(0.001).restart();
  simulation.alphaTarget(0);
}

Answer 1

在div節點上應用CSS scale時，其原點為0,0而不是其當前位置的原點。

嘗試這個：

function zoomed() {

    // apply CSS scale with respect to current position
    node.each(function(d){
    var self = d3.select(this),
            x = self.style("left"),
        y = self.style("top");
    self.style("transform-origin", "-" + x + " -" + y);
  })

  link.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")");
  node.style("transform", "translate(" + d3.event.transform.x + "px," + d3.event.transform.y + "px) scale(" + d3.event.transform.k + ")");

  simulation.alphaTarget(0.001).restart();
  simulation.alphaTarget(0);
}

---

在這里更新小提琴