1

I have been working with this template of d3.js - Collapsible Force Layout diagram: http://bl.ocks.org/mbostock/1093130

Is there any way the leaf nodes of different branches could have different colors?

My guess is that it can be achieved by modifying "function color(d) {}" and assigning different colors to children with different group numbers. Then adding group numbers to children in json. file. ? I might also be wrong.

function color(d) {
  return d._children ? "#3182bd" // collapsed package
     : d.children ? "#c6dbef" // expanded package
     : "#fd8d3c"; // leaf node
}

My knowledge of JavaScripts does not let me figure out the code myself.

Any kind of help from a good programming soul will be much appreciated.

For illustration this is what i'm looking for:

Different leaf node color

Mehdi
  • 7,204
  • 1
  • 32
  • 44
matus
  • 53
  • 8

1 Answers1

0

Indeed, the color function has to be changed.

This SO Question shows how to assign a unique color to records based on one of their attributes. Read also: d3.js ordinal scales reference.

My understanding is that you want all the nodes to be colored based on their parents. Here is how to do it.

Adapting the data source

For each node, you want to know which parent it has. This will allow you to give a color to each node, based on its parent.

For example, data could look like this (excerpt):

{
 "name": "optimization",
 "parentName": "analytics", 
 "children": [
  {"name": "AspectRatioBanker", "parentName": "optimization", "size": 7074}
 ]
}

For each node, parentName tells you how the group of the record.

This information is missing in the gist you linked, you could process it by traversing the tree and attaching the parentName information on the fly.

Color scale

An easy way to get colors that can be assigned to groups is to use the categorical color scales built-in d3.js, for example category10.

var nodeColor = d3.scale.category10();

Assigning color to each record

The color function should be modified in order to assign a color based on the node's parentName property:

function color(d) {
  return nodeColor(d.parentName)
}

You will note that I have modified the function to dynamically assign a color not only to the leaves, but also to the nodes at all levels. This is not compulsory, but I did so to avoid collision between category10 colors, and the hard-coded colors of the gist, which may have looked confusing.

Here is a working demo (fork of the original gist).

Alernatives / variants

You may adapt the code above to assign colors chosen by you for each specific group, using ordinal scale instead of category10.

var nodeColor = d3.scale.ordinal()
  .domain(['none', 'flare', 'analytics', 'graph', 'cluster', 'optimization'])
  .range(['black', '#ffaa00', 'grey', 'red', 'green', 'blue'])

This is illustrated here.

Community
  • 1
  • 1
Mehdi
  • 7,204
  • 1
  • 32
  • 44
  • Thank you very much mef!!! I managed to get different colors to my leaf nodes now according to "var nodeColor = d3.scale.category10();" from your working demo. It gave me random colors though (purple and orange and red). Is there a possibility to chose between the colors? And one off-topic question: Is there a way to make the text of leaf nodes a bit smaller? I might ask a separate proper question if you think this is too off-topic. I'm genuinely thankful to you! – matus Jan 11 '16 at 08:42
  • the choice between colors was explained in the "alternatives / variants" part of the answer, I have updated it to include a concrete demonstation of how to do it. For the text nodes size you should ask a separate question. – Mehdi Jan 11 '16 at 09:06
  • thank you very much mef! i really appreciate your help. have a good day. – matus Jan 12 '16 at 10:01