Javascript Infovis change individual node color

Question

In this case i'm using JIT Hypertree. I am going to differentiate a node's color from the other's so that every node on the tree have their own color. Is there anyway to change the individual color so it would be different from other node?

I just managed to change the color of all nodes, but not individual.

 Node: {
   dim: 9,
   color: "#009933" 
 },

Answer 1

You have to set the overridable property to true there on Node.

Node: {
    dim: 9,
    overridable: true 
},

Then, after loading data and before drawing, iterate over the nodes and use setData to set the individual colors. Here's an example that uses random colors, but you could also plug colors into your JSON data and pull it from there:

ht.graph.eachNode(function(node) {  
    node.setData('color', "hsl("+Math.random()*360+",100%,50%)");
});

Now, shameless plug: I wrote a library to generate colors based on, say, IDs. So if you don't want to handpick colors and you want the colors to have a persistent relation to the data, it would help. Here's the example of using that.

ht.graph.eachNode(function(node) {  
    node.setData('color', $.fn.autumn.getColor(node.id));
});