Sai Rajesh Sai Rajesh - 6 months ago 36
Javascript Question

how to set mulitple text in d3 treemap?



<!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.

Answer

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