1

So I'm developing a Sankey diagram, using D3's Sankey API, and I'm trying to figure out how to change the color of the bands, or cords, going to and from the nodes. An example of what I'm trying to do can be found here:

http://tamc.github.io/Sankey/

I want to be able to individually choose each band and choose that individual band's color. I can't find any documentation for D3's Sankey API so I have no idea how to actually pull this off. I tried the setColors function that I found by searching through the code of the Sankey in the link that I provided. However, that doesn't seem to work with my code. I started my Sankey off using this code as a base:

http://tamc.github.io/Sankey/examples/simple.html

Can someone please give me an idea of how to change the color of a band using this as a reference?

P.S. If someone could also fill me in on how to change the color of a node, as well, that would be great!

Bloo
  • 147
  • 1
  • 8

1 Answers1

5

The example you've linked to uses a different API on top of the Sankey plugin. I'll explain for this example. The Sankey plugin doesn't draw the visual elements, it only computes their positions, so you're free to set the colors as you like.

The relevant code for the links in the example is this:

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

To change the color, simply set either a different class or set stroke explicitly:

.style("stroke", "red")

This can of course be a function as well so that you can set different colors for different paths. The nodes are similar:

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

In the example, the fill color is set based on the name -- you can adjust this as you like.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • I applied all of the codes that you just provided and nothing seems to work. – Bloo Mar 17 '14 at 00:47
  • Could you post a complete example of what you're doing please? – Lars Kotthoff Mar 17 '14 at 11:17
  • I can't put the complete code up on here: `var sankey = new Sankey(); sankey.stack(0,["CAS-1","COI-1", "CHP-1", "CEH-1", "CB-1"]); sankey.stack(1,["CAS-2","COI-2", "CHP-2", "CEH-2", "CB-2"]); sankey.stack(3,["CAS-3","COI-3", "CHP-3", "CEH-3", "CB-3"]); sankey.stack(4,["CAS-4","COI-4", "CHP-4", "CEH-4", "CB-4"]); sankey.setData([ // First column to second column ["CAS-1",100,"CHP-2"],["COI-1",100,"CHP-2"],["CHP-1",100,"COI-2"],["CEH-1",100,"CB-2"],["CB-1",100,"COI-2"] ]);` I don't know how to make it format correctly on here... – Bloo Mar 17 '14 at 18:37
  • I can't really help you if I don't know what you're doing. The code I've posted should work if you're modifying the example I've referenced. – Lars Kotthoff Mar 17 '14 at 18:41
  • What about the simple.html example I referenced? My code is practically a built up version of that (so just more data and stacks). Any ideas on how to modify the color of the bands for that example? – Bloo Mar 17 '14 at 18:46
  • Well the library you're using there has a higher-level API that doesn't allow you to do that directly. You would need to modify its source code or the elements after they have been added. Both would be more difficult than starting from the example I've referenced, which allows you to change the colors directly. – Lars Kotthoff Mar 17 '14 at 18:52