Question

我正在尝试修改D3 sankey示例：

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

我想将每个节点的y位置移动到指定位置（以下示例中为300px）。

我能够看到实现这一目标的最直接的方法是在添加SVG元素后简单地重新调用dragmove()。我已在此功能中对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

找到解决方案。

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

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

在＆＃39; load＆＃39;上调用D3.JS功能而不是鼠标事件

1 个答案: