在 '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 node 中：

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

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

Answer 1

找到解决方案。

首先我删除了 var node 末尾的 .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);

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

Calling D3.JS function on 'load' rather than on mouse event

javascript

d3.js

charts

data-visualization

nvd3.js