如何翻译 d3.js 节点？

Question

我有一个包含节点组的d3力导向图：

var node = vis.selectAll("g.node")
              .data(json.nodes)
              .enter().append("svg:g")
              .attr("class", "node")
              .attr("id", function(d) { return "node" + d.index; })
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
              .call(force.drag);

这段代码可以正常渲染。

当我展示id为detail_container的详细内容div时，我希望把这些节点向右移动200个像素。

我尝试过以下方法，但在展示detail_container时，节点没有发生任何变化（除了展示详细div）：

$('#detail_container').fadeIn('slow', function() {
    d3.selectAll("g.node").attr("transform", function(d) { return "translate(200, 0)"; });
});

d3.selectAll("g.node")语句包含节点数据，我可以在控制台中查看确认：

console.log(d3.selectAll("g.node"));

作为另一种方法，我将缩放/平移行为附加到我的图表上：

var vis = d3.select("#position")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .attr("pointer-events", "all")
            .append("svg:g")
            .call(d3.behavior.zoom().on("zoom", redraw))
            .append("svg:g");

这个可以正常工作。然而，它只与鼠标交互，而不是与程序中发生的事件交互，所以是否有一种编程方式来调用缩放/平移行为，以便我可以实现我想要的翻译？

- Alex Reynolds

Answer 1

如果您只想将节点移动到右侧，则可以通过设置变换来实现；只有在您想要交互式平移和缩放时才使用缩放行为。

我不清楚当您选择节点并设置变换时为什么什么也没有发生，但我看到的一个问题是，通过直接在节点上设置变换属性，您正在覆盖力导向图设置的x和y位置。因此，您可能希望将所有节点放置在另一个G元素中，以便可以通过更改容器上的变换来偏移所有节点，而不是个别节点。DOM将如下所示：

<g class="nodes">
  <g class="node" transform="translate(42,128)">
    <circle r="2.5">
    <text>First Node</text>
  </g>
  <g class="node" transform="translate(64,501)">
    <circle r="2.5">
    <text>Second Node</text>
  </g>
  …
</g>

那么，如果你想把所有节点向右移动200px，只需要：

d3.select(".nodes").attr("transform", "translate(200,0)");

要撤销这个移动效果，只需要移除容器的变换即可：

d3.select(".nodes").attr("transform", null);

如果你想要更加高级的效果，可以改变力导向布局的重心，并在显示或隐藏详细信息 DIV 时重新加热图形。这将导致节点平滑地移动到新位置，为详细容器腾出空间。你可以在 Shan Carter 的可视化作品中看到一个例子：Four Ways to Slice Obama’s 2013 Budget Proposal：点击“Types of Spending”按钮，观察圆圈重新居中。或者，参考此自定义引力示例。

- mbostock