我想在 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;
}
我该怎么做?
提前谢谢您。
生成 sankey 时,sankey 中的每个节点都会分配一个 dx 值,该值与其从左侧开始的位置相关。如果您迭代节点 (graph.nodes),并创建一个包含唯一 dx 值的数组,您将知道有多少步骤,以及步骤标签的 x 坐标。
该数组可以用作数据连接来生成标签,然后可以使用该值创建文本,例如 label.text(function(d) { return "step " + d; })
像这样,我确信有可能有更清晰的解决方案,但如果您根据您的情况调整 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)