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;}）