如何在 d3 树形图中设置多个文本？答案

【问题标题】：how to set mulitple text in d3 treemap?如何在 d3 树形图中设置多个文本？
【发布时间】：2016-05-30 04:17:57
【问题描述】：

<!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 树图中的文本？

{ “名称”：“最大”， “价值”：100， “孩子们”： [ { “名称”：“西尔维亚”， “价值”：75， “孩子们”： [ {“名称”：“克雷格”，“价值”：25}， {“名称”：“罗宾”，“价值”：25}， {“名称”：“安娜”，“价值”：25} ] }, { “名称”：“大卫”， “价值”：75， “孩子们”：[ {“名称”：“杰夫”，“价值”：25}， {“名称”：“巴菲”，“价值”：25} ] }, { "姓名":"X先生", “价值”：75 } ] } 这是我的 json 文件。

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案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

【讨论】：