使用D3.js库更改Sankey Diagram中节点的颜色。

时间:2015-06-03 08:38:24

标签: javascript d3.js sankey-diagram

这是用Javascript编写的代码部分,用于在sankey图中创建矩形节点。

代码:

node.append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
      .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
      .append("title")
      .text(function(d) { return d.name + "\n" + format(d.value); });

每个节点都包含一个名称“location | month”。所以这里从d3.scale.category20();

中分配随机颜色

所以我想为位置相同的所有节点分配相同的颜色。 例如loc3 | May

因此所有位置为loc3的节点必须是相同的颜色。

1 个答案:

答案 0 :(得分:0)

在该代码中,填充颜色是通过传递

的结果来确定的
d.name.replace(/ .*/, ""));

color比例功能。

如果您希望根据名称的位置部分颜色相同,则需要修改上述代码以仅提取位置。

根据您对name属性的描述,您可以简单地在|字符上拆分名称并返回第一部分:

d.name.split("|")[0];