使用 D3.js 库更改桑基图中节点的颜色。

Question

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

代码：

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 的节点必须具有相同的颜色。

Answer 1

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

的结果来确定的

d.name.replace(/ .*/, ""));

到color缩放函数。

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

根据您对名字属性的描述，您可以简单地将名字拆分为 | 字符和 return 第一部分：

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

使用 D3.js 库更改桑基图中节点的颜色。

Changing the colour of the node in Sankey Diagram using D3.js library.

javascript

d3.js

sankey-diagram