1

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.

Yatin Shirwadkar
  • 33
  • 1
  • 5

1 Answers1

0

In that code, the fill color is determined by passing the result of 

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

to the color scale function.

If you want the colors to be the same based on the location part of the name, you need to modified the above code to extract just the location.

Based on your description of the name property, you can simply split the name on the | character and return the first part:

d.name.split("|")[0];
knolleary
  • 9,777
  • 2
  • 28
  • 35
  • second enhancement is that the nodes should be clickable and on clicking a node, say "loc4|June", all nodes with names of the form "loc4|*" and links starting or ending in them should become opaque (i.e. opacity:1 in their style). – Yatin Shirwadkar Jun 03 '15 at 12:07
  • Yeah i just want to know can we achieve that using the library.\ – Yatin Shirwadkar Jun 03 '15 at 12:37
  • For your second enchancement - may be worth asking as a new question rather than try to address here in the comments. It is easy to achieve - one approach would be to add a class names to all nodes based on these properties (ie node_location_loc4 and node_month_june) - then you can easily do a selectAll(".node_location_loc4") to select all the appropriate nodes and apply whatever style you want to them. – knolleary Jun 03 '15 at 12:40