将平移缩放添加到 d3js 强制定向

Question

我正在慢慢地用d3.js做一个工作流程设计器。我正在尝试从示例中添加平移/缩放行为。关于如何使其工作的任何想法？我已经让它部分工作，非常粗糙，抖动可怕，但在我的沮丧中，我修改了它而没有保存，尽管它无论如何都很差。

正在进行的工作流程

http://jsfiddle.net/3ckG5/27/

平移/缩放示例

http://bl.ocks.org/benzguo/4370043

鼠标向下

  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 + ")");
}

Answer 1

您遇到的问题是您正在翻译和缩放 SVG 画布，而您真正想要做的是平移和缩放保存网络的 g 元素。

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

您可以在此处看到带有力布局的工作平移和缩放：http://bl.ocks.org/emeeks/9357371