Search code examples
javascriptd3.jsbundle-layout

Legend colors do not always correspond to the values


This is the fiddle.

For some reason, the colors of some groups do not match the value of size.

For instance, I checked "name":"flare.analytics.cluster.AgglomerativeCluster","size"‌​:3938. In the drawing it's marked in "pink-red" color which corresponds to the legend > 5000 (scroll right to see the legend). According to my understanding it should be marked in the color of the legend 2000.


Solution

  • For some reason, the colors of some groups do not match the value of size.

    Well, the explanation is simple: you're not using size as the variable to paint your links. Instead of that, you're using the length of the imports array inside each node:

    .style("stroke", function(d){
        return colorScale(d.target.imports.length)
    })
    

    And this is your domain:

    [0, 2, 4, 6, 8, 10, 12]
    

    Besides that, you're colouring by the length of the importarray of the target, not by the length of the import array of the node itself.