Javascript 将平移缩放添加到d3js力定向

我正在慢慢地用d3.js制作一个工作流设计器。我正在尝试添加示例中的平移/缩放行为。有什么办法让它工作吗？我已经让它部分工作，非常粗糙的可怕的抖动，但在我的挫折感，我修改了它没有保存，虽然它是相当差无论如何

正在进行的工作流

平移/缩放示例

鼠标落下

  if (!mousedown_node && !mousedown_link) {
    // allow panning if nothing is selected
    svg.call(d3.behavior.zoom().on("zoom"), rescale);
    return;
  }  

鼠标移动

  if (!mousedown_node && !mousedown_link) {
    // allow panning if nothing is selected
    force.start();
    svg.call(d3.behavior.zoom().on("zoom"), null);
    return;
  } 

附加事件

为力定向图形创建背景

var svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

调用缩放函数的行为

svg.call(d3.behavior.zoom().on("zoom", rescale))
    .on("dblclick.zoom", null)
    .on("mousemove", mousemove)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);

调回缩放事件

// rescale g
function rescale() {
  var trans=d3.event.translate;
  var scale=d3.event.scale;

  svg.attr("transform",
      "translate(" + trans + ")"
      + " scale(" + scale + ")");
}

---

您遇到的问题是，您正在转换和缩放SVG画布，实际上您想要做的是转换和缩放容纳网络的g元素

但是请记住，当您缩放g元素时，它将缩放其中每个元素的笔划宽度，因此您需要根据当前缩放级别重新调整笔划宽度（只需将所需笔划宽度除以当前缩放值）

您可以在此处看到使用“力”布局的工作平移和缩放：

---

感谢您提供了这个新示例。同时也感谢您提供的全面信息。我已经有了我的副本：-）嗨，谢谢你的例子。我调查过了，发现少了些什么。在强制图的原始示例中，您可以抓住一个点并拉伸它。对不起，错误地按enter键，所以我继续这里。我的解决方案是在单击节点时向缩放和拖动事件添加“stoppropigation（）”。代码如下：