d3treemap根据json中传递的数据更改颜色-d3treemapchangecoloraccodingtodatapassedinjson

I am trying to change color on basis of color parameter scale passed in json.

我试图根据json中传递的颜色参数比例改变颜色。

data.json

{
    "name": "country",
    "children": [
        {
            "name": "Verizona State",
            "value": 100,
            "color": 0.9,
            "children": [
                {
                    "name": "xyz city",
                    "value": 30,
                    "color": -0.64,
                    "children": [
                        {
                            "name": "xyz.abccity",
                            "value": 30,
                            "color": 0.3

                        }
                    ]
                },
                {
                    "name": "abccity",
                    "value": 40,
                    "color": 0.4
                }
            ]
        },
        {
            "name": "NewJersey",
            "value": 50,
            "color": 0.5,
            "children": [
                {
                    "name": "defcity",
                    "value": 30,
                    "color": -0.2
                }
            ]
        }
    ]
}

index.html

I can also pass the colors instead of scales passed in json. What should I pass in attr("fill",)? Please suggest changes.

我也可以传递颜色而不是传递给json的比例。我应该在attr(“填充”)中传递什么?请建议更改。

2 个解决方案

var color = d3.scale.category10();

cells.append("rect")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("width", function(d) { return d.dx; })
    .attr("height", function(d) { return d.dy; })
    .style("fill", function(d) {
        return color(d.color);
    });

var cells = canvas.selectAll(".cell")
    .style("position", "relative")
    .data(treemap)
    .enter()
    .append("g")
    .attr("class", "cell")
    .style("stroke", "#fff");

cells.append("rect")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("width", function(d) { return d.dx; })
    .attr("height", function(d) { return d.dy; })
    .style("fill", function(d) {
        return d.children ? null:color(d.parent.name);
    });