色阶在D3中的树形图中不起作用

Question

I am trying to create a Treemap in d3 using csv file. However color scale / color coding does not seem to work for the treemap. I tried hardcoding the color for the rectangles even then it doesn't work.

You can have a look at my html, js, css, & .csv files in the below link. http://bl.ocks.org/geetanjalirana/bcfcf2c66609193f75a7

Kindly suggest where am I going wrong.

Thanks in advance. Geetanjali

Answer 1

Two changes needed in your current code: In your NewFile.css add fill:none !important; do

rect.parent {
    pointer-events: all; 
    fill:none !important;
}

In your NewFile.js in your rect do this you need to add the fill style attribute .

function rect(rect) {
    rect.attr("x", function(d) { return x(d.x); })
        .attr("y", function(d) { return y(d.y); })
        .attr("width", function(d) { return x(d.x + d.dx)  - x(d.x); })
        .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
    //  .style("background", function(d) { return d.parent ? null : data_colorScale(d.parent.name); });
        .style("fill", function(d) { 
            return d.parent ? data_colorScale(d.parent.name) : null; 
          });
    //  .style("background", "red" });
    //  .attr("fill", function(d) { data_colorScale(d.parent.name); });
}

Hope this helps!