1
我试过这段代码。我是新来的d3。使用d3树形图上去继续点击父节点上的子节点
,但能直接到达子节点直接
高清城市,某某市和市农行上显示的映像树
data.json
{
"name":"country",
"children":
[
{
"name": "Verizona State",
"value": 100,
"children": [
{
"name": "xyz city",
"value": 30
},
{
"name": "abc city",
"value": 40
}
]
},
{
"name": "New Jersey",
"value": 50,
"children": [
{
"name": "def city",
"value": 30
}
]
}
]
}
的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>
我想要一个方法来显示第一个 Verizona州和新泽西州的树形图
并点击verizona状态以获得xyz城市和abc城市树形图
请建议更改。
的这个例子中,你可以添加你的造型也是这个问题,目前的版本不显示树正确 – Sajeetharan
我也做了造型权 – userRaj