如何在 d3 treemap 中设置多个文本？

Question

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

这是我用于创建树图的 d3 代码。在文本部分我必须显示多个文本。现在它单独显示 d.name 但我必须显示 d.name 和 d.value...如何在d3树图中显示多个文本？

{ "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 } ] } 这是我的 json 文件。

Answer 1

只需为值添加另一个文本并调整 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; })

工作代码here

如何在 d3 treemap 中设置多个文本？

how to set mulitple text in d3 treemap?

javascript

d3.js

nvd3.js