d3.js sankey link color

Question

I am looking for making the link color same as node fill color in d3 sankey charts.

I am using following function to get the node color

function getNodeColor(d){
          console.log(d3.rgb(d.color).darker(2));
          return d3.rgb(d.color).darker(2);
}

Following is my code for painting the text color of the links

// add in the title for the nodes
    node.append("text")
        .attr("x", -6)
        .attr("y", function(d) { return d.dy / 2; })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(function(d) { return d.name; })
        .filter(function(d) { return d.x < width / 2; })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start")
        .style("stroke", getNodeColor);

Above works perfectly fine and the text displays the node text with the node color. Same is not true when I try to change the stroke value in link definition by same way :

 var link = svg.append("g").selectAll(".link")
        .data(graph.links)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", path)
        .style("stroke-width", function(d) { return Math.max(1, d.dy); })
        .style("stroke", getNodeColor)
        .sort(function(a, b) { return b.dy - a.dy; });

I am new to d3 sankey and follow http://bl.ocks.org/d3noob/c9b90689c1438f57d649

Help appreciated...

Bottomline : I am looking for making the link/chord colors of sankey chart same as that of rect fill color...

Answer 1

You can use the following code to use the source node color for the links in your graph. You could also use target.color if you prefer to use the target node color.

svg.selectAll(".link")
  .style('stroke', function(d){
    return d.source.color;
  })

This code would need to be placed after the code which sets the node colors.