Reputation: 1982
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="d3.min.js"></script>
</head>
<body>
<script>
var color = d3.scale.category10();
var canvas = d3.select('body').append('svg')
.attr('width',800)
.attr('height',500)
d3.json('mydata.json',function (data){
var treemap = d3.layout.treemap()
.size([800,500])
.nodes(data)
var cells = canvas.selectAll(".cell")
.data(treemap)
.enter()
.append("g")
.attr("class","cell")
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; })
.attr("fill",function (d) { return d.children ? null : color(d.parent.name); })
.attr("stroke",'#fff')
cells.append("text")
.attr("x",function (d) { return d.x + d.dx / 2 })
.attr("y",function (d) { return d.y + d.dy / 2 })
.attr("text-anchor", "middle")
.text(function (d) { return d.children ? null : d.name; })
})
</script>
</body>
</html>
this is my d3 code for creating treemap..in text part i have to display multiple text.,now it display d.name alone but i have to dispaly d.name and d.value...how to display multiple text in d3 treemap?
{ "name": "Max", "value": 100, "children": [ { "name": "Sylvia", "value": 75, "children": [ {"name": "Craig","value": 25}, {"name": "Robin","value": 25}, {"name": "Anna","value": 25} ] }, { "name": "David", "value": 75, "children":[ {"name": "jeff", "value": 25}, {"name": "Buffy", "value": 25} ] }, { "name":"Mr X", "value":75 } ] } this is my json file.
Upvotes: 3
Views: 537
Reputation: 32327
Simply add another text for values and adjust the y.
cells.append("text")
.attr("x",function (d) { return d.x + d.dx / 2 })
.attr("y",function (d) { return d.y + d.dy / 2 + 15 })//15 pixels below the name label.
.attr("text-anchor", "middle")
.text(function (d) { return d.children ? null : d.value; })
working code here
Upvotes: 2