Sai Rajesh
Sai Rajesh

Reputation: 1982

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.

Upvotes: 3

Views: 537

Answers (1)

Cyril Cherian
Cyril Cherian

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

Related Questions