Question

我试图根据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

<html>
<script src="http://d3js.org/d3.v3.min.js"></script>

<body>
<div id="heatmap">
<script>

    var color = d3.scale.category10();
    var canvas = d3.select("#heatmap").append("svg")
                .attr("width",500)
                .attr("height",500);

    d3.json("data.json" ,function(data){

        var treemap=d3.layout.treemap()
        .size([500,500])
        .nodes(data);

        console.log(treemap);


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

        cells.append("rect")
        .attr( "x" , function(d) { console.log(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; })
        .attr("fill", function(d){return d.children ? null:color(d.parent.name); })


        cells.append("text")
        .attr("x",function(d) {return (d.x + d.dx)/2})
        .attr("y",function(d) {return (d.y + d.dy)/2})
        .text(function(d){ return d.children? null :d.name;})
    })
</script>
</div>
</body>
</html>

我也可以传递颜色而不是传递给json的比例。我应该在attr（“填充”）中传递什么？请提出修改建议。

Answer 1

你可以做这样的事情

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);
    });

Answer 2

您需要使用.style（）而不是.attr（）：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

d3 treemap根据json中传递的数据改变颜色

2 个答案: