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


here's part of code written in javascript creates rectangle node in 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 name "location|month". here randomly colours assigned d3.scale.category20();

so want assign same colour node location same. eg loc3|may

so nodes having location loc3 must of same colour.

in code, fill color determined passing result of

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

to color scale function.

if want colors same based on location part of name, need modified above code extract location.

based on description of name property, can split name on | character , return first part:

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

Comments