javascript - 在 'load' 而不是鼠标事件上调用 D3.JS 函数

Question

我正在尝试对此处的 D3 sankey 示例进行修改:

http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13

我想将每个节点的 y 位置移动到指定位置(在下面的示例中为 300px)。

我能看到实现此目的的最直接方法是简单地重新调整 dragmove() 的用途，以便在添加 SVG 元素后调用。我在此函数中对 d.y 进行了更改，将其更改为 300px:

  function dragmove(d) {
    d3.select(this).attr("transform", 
        "translate(" + d.x + "," + (
                d.y = 300
            ) + ")");
    sankey.relayout();
    link.attr("d", path);
  }

添加节点时调用此函数:

  var node = svg.append("g").selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; })
    .call(d3.behavior.drag()
      .origin(function(d) { return d; })
      .on("dragstart", function() { 
      this.parentNode.appendChild(this); })
      .on("drag", dragmove));

目前，它在指定的鼠标事件上按预期移动到 300px，但我希望它在添加所有 SVG 元素后自行移动。

仅使用 .call() 而不使用鼠标事件是行不通的。

我还尝试将转变合并到 var 节点 中:

return "translate(" + d.x + "," + 300 + ")"; })

然而，这会导致引线和节点之间不匹配，并且调用 sankey.relayout() 似乎没有什么区别。

Answer 1

找到了解决方案。

首先，我删除了 var 节点 末尾的 .call()，因为我不需要拖动事件:

var node = svg.append("g").selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; });

然后我将 d.y 设置为任意位置 (300):

return "translate(" + d.x + "," + (d.y = 300) + ")"; });

最后我强制它在 var node 之后立即重新绘制连接链接。

sankey.relayout();
link.attr("d", path);