如何翻译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 div的detail detail_container时，我想将这些节点向右转换(移动)。

我尝试了以下方法，但是当我显示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"));

作为另一种方法，我将缩放/pan行为附加到图形中：

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

这个很好用。但是，这与鼠标交互，而不是与程序中发生的事件交互，因此是否有一种编程方法来调用缩放/pan行为，以便完成我想要的转换？

Answer 1

如果您只想将节点移动到右侧，则可以通过设置转换来完成这一任务；只有当您希望进行交互式摇摄和缩放时，才可以使用缩放行为。

我不清楚为什么在选择节点并设置转换时什么都没有发生，但我看到的一个问题是，通过直接在节点上设置transform属性，您将覆盖由力布局设置的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>

那么，如果您想在200‘s之前将所有节点移到右边，那么只需：

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

若要恢复移位，请删除容器的转换：

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

如果你想成为真正的花花公子，另一种实现这种效果的方法是改变力布局的重心，然后在显示或隐藏细节DIV时重新加热图表。这将使节点平稳地转移到一个新位置，为details容器让路。你可以在单卡特的可视化中看到这样的一个例子，Four Ways to Slice Obama’s 2013 Budget Proposal：点击“支出类型”按钮，然后观察圆圈重新出现。或者，见this example on custom gravity。