在树形图d3.js中解析json以获取不同的颜色

Question

I have followed this link for reference

But the json in this link is different. I want to parse:

[
    {\"name\":\"ABC\",\"amount\":489956},
    {\"name\":\"XYZ\",\"amount\":54554726}
]

I have tried using this code:

     var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg
            .attr("height");

    var fader = function(color) {
        return d3.interpolateRgb(color, "#fff")(0.2);
    }, color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)), format = d3
            .format(",d");

    var treemap = d3.treemap().tile(d3.treemapResquarify).size(
            [ width, height ]).round(true).paddingInner(1);

  var jsonResp = "{\"name\": \"schools\",\"children\":[{\"name\":\"ABC\",\"amount\":489956},{\"name\":\"XYZ\",\"amount\":54554726}]}";

    var data = JSON.parse(jsonResp);    
    var root = d3.hierarchy(data).eachBefore(
                function(d) {
                    d.data.id = (d.parent ? d.parent.data.id + "." : "")
                            + d.data.name;
                }).sum(sumBySize).sort(function(a, b) {
            return b.height - a.height || b.value - a.value;
        });

        treemap(root);

        var cell = svg.selectAll("g").data(root.leaves()).enter().append(
                "g").attr("transform", function(d) {
            return "translate(" + d.x0 + "," + d.y0 + ")";
        });

        cell.append("rect").attr("id", function(d) {
            return d.data.id;
        }).attr("width", function(d) {
            return d.x1 - d.x0;
        }).attr("height", function(d) {
            return d.y1 - d.y0;
        }).attr("fill", function(d) {
            return color(d.parent.data.id);
        });

        cell.append("clipPath").attr("id", function(d) {
            return "clip-" + d.data.id;
        }).append("use").attr("xlink:href", function(d) {
            return "#" + d.data.id;
        });

        cell.append("text").attr("clip-path", function(d) {
            return "url(#clip-" + d.data.id + ")";
        }).selectAll("tspan").data(function(d) {
            return d.data.name.split(/(?=[A-Z][^A-Z])/g);
        }).enter().append("tspan").attr("x", 4).attr("y", function(d, i) {
            return 13 + i * 10;
        }).text(function(d) {
            return d;
        });

        cell.append("title").text(function(d) {
            return  "Amount - "+format(d.value)+" ";
        });

        d3.selectAll("input").data([ sumBySize, sumByCount ], function(d) {
            return d ? d.name : this.value;
        }).on("change", changed);

        var timeout = d3.timeout(function() {
            d3.select("input[value=\"sumByCount\"]").property("checked",
                    true).dispatch("change");
        }, 2000);

        function changed(sum) {
            timeout.stop();
            treemap(root.sum(sum));
            cell.transition().duration(750).attr("transform", function(d) {
                return "translate(" + d.x0 + "," + d.y0 + ")";
            }).select("rect").attr("width", function(d) {
                return d.x1 - d.x0;
            }).attr("height", function(d) {
                return d.y1 - d.y0;
            });
        }
    });

    function sumBySize(d) {
        return d.amount;
    } 

But I am getting same colour for all objects in the parsed json. I want to have different colors for each object without changing the structure of aforementioned json. How to change the parsing in the code to obtain different colors for each object?
I need to categorise the amount in json as well as Crores or Lakhs based on digits and display it on hover. I am just a beginner in d3.js.

Answer 1

First of all there are several issues with the code you provided :

• You removed d3.json("flare.json", function(error, data) { from the original code, but forgot to remove the closing }); resulting in an error
• You removed the definition of sumByCount which is used in the rest of the code, resulting in an other error

Onto your color problem, the color of the rectangle is set here :

cell.append("rect").attr("id", function(d) {
            return d.data.id;
        }).attr("width", function(d) {
            return d.x1 - d.x0;
        }).attr("height", function(d) {
            return d.y1 - d.y0;
        }).attr("fill", function(d) {
            return color(d.parent.data.id);
        });

it's controlled by the fill attribute. Which means there is probably an issue with d.parent.data.id

d here is an element of the array root.leaves() if you print this out in the console, you'll see that d.parent.data.id match 'schools' for each element. Which is why the color scale returns the same color.

If you use d.data.id directly, with the html from the example with your data, you end up with a working code (with root.leaves() printed out) :

 var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg .attr("height"); var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); }, color = d3.scaleOrdinal(d3.schemeCategory10.map(fader)), format = d3 .format(",d"); var treemap = d3.treemap().tile(d3.treemapResquarify).size( [width, height]).round(true).paddingInner(1); var jsonResp = "{\\"name\\": \\"schools\\",\\"children\\":[{\\"name\\":\\"ABC\\",\\"amount\\":489956},{\\"name\\":\\"XYZ\\",\\"amount\\":54554726}]}"; var data = JSON.parse(jsonResp); var root = d3.hierarchy(data).eachBefore( function(d) { d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; }).sum(sumBySize).sort(function(a, b) { return b.height - a.height || b.value - a.value; }); treemap(root); console.log(data); console.log(root.leaves()); var cell = svg.selectAll("g").data(root.leaves()).enter().append( "g").attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; }); cell.append("rect").attr("id", function(d) { return d.data.id; }).attr("width", function(d) { return d.x1 - d.x0; }).attr("height", function(d) { return d.y1 - d.y0; }).attr("fill", function(d) { return color(d.data.id); }); cell.append("clipPath").attr("id", function(d) { return "clip-" + d.data.id; }).append("use").attr("xlink:href", function(d) { return "#" + d.data.id; }); cell.append("text").attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; }).selectAll("tspan").data(function(d) { return d.data.name.split(/(?=[AZ][^AZ])/g); }).enter().append("tspan").attr("x", 4).attr("y", function(d, i) { return 13 + i * 10; }).text(function(d) { return d; }); cell.append("title").text(function(d) { return "Amount - " + format(d.value) + " "; }); d3.selectAll("input").data([sumBySize, sumByCount], function(d) { return d ? d.name : this.value; }).on("change", changed); var timeout = d3.timeout(function() { d3.select("input[value=\\"sumByCount\\"]").property("checked", true).dispatch("change"); }, 2000); function changed(sum) { timeout.stop(); treemap(root.sum(sum)); cell.transition().duration(750).attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; }).select("rect").attr("width", function(d) { return d.x1 - d.x0; }).attr("height", function(d) { return d.y1 - d.y0; }); } function sumByCount(d) { return d.children ? 0 : 1; } function sumBySize(d) { return d.amount; } 

 <svg width="960" height="570"></svg> <form> <label><input type="radio" name="mode" value="sumBySize" checked> Size</label> <label><input type="radio" name="mode" value="sumByCount"> Count</label> </form> <script src="https://d3js.org/d3.v4.min.js"></script> 

However this is a quick fix, as I don't have the time to completely analyze what's happening here.I think you should spend some time trying to understand completely the code from the link you provided, or you might run into many other issues. Copy pasting something you don't completely understand will usually result in hours of painful debugging ;)