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

Question

Here's the part of code written in Javascript that creates the rectangle node in the sankey diagram.

Code :

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

each node contain a name as "location|month". so here randomly colours are assigned from the d3.scale.category20();

So i want to assign same colour to all node whose location is same. Eg loc3|May

so all the nodes having location as loc3 must be of same colour.

Answer 1

在该代码中，填充颜色是通过传递结果来确定的

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

到color尺度函数。

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

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

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