如何翻译 d3.js 节点？答案

【问题标题】：How do I translate d3.js nodes?如何翻译 d3.js 节点？
【发布时间】：2012-04-11 00:47:31
【问题描述】：

我有一个包含一组节点的 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");

这很好用。但是，这与鼠标交互，而不是与我的程序中发生的事件交互，那么是否有一种 programmatic 方式来调用缩放/平移行为，以便我可以完成我想要的翻译？ p>

【问题讨论】：

标签： javascript events d3.js geometry force-layout

【解决方案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：单击“支出类型”按钮并观察圆圈的中心位置。或者，请参阅this example on custom gravity。

【讨论】：