我正在尝试根据 json 中传递的颜色参数比例来更改颜色。
数据.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("fill",) 中传递什么？ 请建议更改。
最佳答案
你可以这样做
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);
});
关于javascript - d3 treemap 根据 json 中传递的数据改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33592903/