D3.js Sankey 图：在每列节点上方添加标题（文本）

Question

我想在 D3.js Sankey 图中的每列节点上方添加标题。例如，我举这个例子：http://bl.ocks.org/d3noob/5028304这就是我想要的结果：

我有这样的想法，但它并不能说服我。我正在寻找其他替代方案。

        var columnNames=["step 1","step 2","step 3","step 4"];
        var distance=width/(columnNames.length-1);
        var pos=0;
        
        for (var i = 0; i < columnNames.length; i++){
            svg.append("text")
              .attr("x", pos)
              .text(columnNames[i]); 

            pos=pos+distance;
        }

我该怎么做？

提前谢谢您。

Answer 1

生成 sankey 时，sankey 中的每个节点都会分配一个 dx 值，该值与其从左侧开始的位置相关。如果您迭代节点 (graph.nodes)，并创建一个包含唯一 dx 值的数组，您将知道有多少步骤，以及步骤标签的 x 坐标。

该数组可以用作数据连接来生成标签，然后可以使用该值创建文本，例如 label.text(function(d) { return "step " + d; })

Answer 2

像这样，我确信有可能有更清晰的解决方案，但如果您根据您的情况调整 x 和 y 位置上的过滤器，它应该可以工作：

// add column titles left
node.append("text")
  .filter(function(d) {return d.y < 10})
    .filter(function(d) {return d.x < 10})
      .text("Left text")
      .style("font", "20px sans-serif")
      .attr("y", -20)
      .attr("x", -95)

// add column titles right
node.append("text")
  .filter(function(d) {return d.y < 10})
    .filter(function(d) {return d.x > 50})
      .text("Right text")
      .style("font", "20px sans-serif")
      .attr("y", -20)
      .attr("x", -50)