(d3.js) 如何在弧外创建标签？答案

【问题标题】：(d3.js) How to create labels outside arcs?(d3.js) 如何在弧外创建标签？
【发布时间】：2016-02-11 14:51:41
【问题描述】：

我正在尝试在一些弧之外创建标签。我读了这篇文章： Label outside arc (Pie chart) d3.js 但仍然无法使其工作。不知何故，DOM 中只出现了一个文本标签，而且它的位置不正确。

这里是 JSFiddle 链接：https://jsfiddle.net/SashimiEthan/rLe9g3bq/

这是我的代码：

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="d3.min.js"></script>
</head>
<body>
<script>

  var margin = {top: 10, right: 50, bottom: 10, left: 50},
      width = 300,
      r = width / 2,
      labelr = r + 20,
      outerRadius = 150,
      innerRadius = outerRadius - 30;
      numberOfSegments = 12;
      radians = (Math.PI * 2) / numberOfSegments;
      degrees = 360 / numberOfSegments;

  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", 530);

  for (var j = 0; j < 5; j++) {
    var arc = d3.svg.arc()
        .innerRadius(innerRadius - j*30)
        .outerRadius(outerRadius - j*30)
        .startAngle(function (d,i) { return radians * i } )
        .endAngle(function (d,i) { return radians * (i + 1) });

    var myGroup = svg.append("g")
        .attr("transform", "translate(200,200)")
        .attr("class","arcgroup")
        .selectAll("path").data(d3.range(numberOfSegments))
        .enter().append("path")     
        .attr("class", "seg"+j+"")
        .attr("d", arc)
        .attr("fill", function(d,i) {
          return d3.hsl(i * degrees, 1 - 0.2*j, 0.5)
        });
  }

  var pos = d3.svg.arc()
      .innerRadius(innerRadius+30)
      .outerRadius(outerRadius+30)
      .startAngle(function (d,i) { return radians * i } )
      .endAngle(function (d,i) { return radians * (i + 1) });

  var label = svg.append("text")
      .attr("transform", function(d,i) { 
        return "translate(" + pos.centroid(d,i) + ")"; 
      })
      .attr("text-anchor", "middle")
      .text(function(d,i){
              return i*degrees + "°";
      });
</script>

</body>
</html>

非常感谢！

【问题讨论】：

欢迎来到 Stack Overflow！你可以说得更详细点吗？当您说位置不正确时，请解释。标签出现在哪里？您希望它出现在哪里？

标签： javascript d3.js donut-chart

【解决方案1】：

您在没有选择的情况下处理 svg：您只添加了一个没有附加任何数据的元素，这就是为什么 d=undefined 和 i=0 在 transform 函数中的原因。

像在群组创作中一样使用选择：类似

var selection = svg.append("g").attr("transform", "translate(200,200)").
    selectAll("text").data(d3.range(numberOfSegments)).enter()

var label = selection.append("text")
    .attr("transform", function (d) {
        return "translate(" + pos.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text(function (d) {
        return d * degrees + "°";
    });

还有一个演示（标签的定位可能需要一些工作，但这应该可以帮助您入门）

var margin = {
    top: 10,
    right: 50,
    bottom: 10,
    left: 50
},
width = 300,
    r = width / 2,
    labelr = r + 20,
    outerRadius = 150,
    innerRadius = outerRadius - 30;
numberOfSegments = 12;
radians = (Math.PI * 2) / numberOfSegments;
degrees = 360 / numberOfSegments;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", 530);

for (var j = 0; j < 5; j++) {
    var arc = d3.svg.arc()
        .innerRadius(innerRadius - j * 30)
        .outerRadius(outerRadius - j * 30)
        .startAngle(function (d, i) {
        	return radians * i
        }).endAngle(function (d, i) {
            return radians * (i + 1)
        });

    var myGroup = svg.append("g")
        .attr("transform", "translate(200,200)")
        .attr("class", "arcgroup")
        .selectAll("path").data(d3.range(numberOfSegments))
        .enter().append("path")
        .attr("class", "seg" + j + "")
        .attr("d", arc)
        .attr("fill", function (d, i) {
        return d3.hsl(i * degrees, 1 - 0.2 * j, 0.5)
    });
}


var pos = d3.svg.arc()
    .innerRadius(innerRadius+30)
    .outerRadius(outerRadius+30)
    .startAngle(function (d) {
    	return radians * d
	}).endAngle(function (d) {
    	return radians * (d + 1)
	});


var selection = svg.append("g").attr("transform", "translate(200,200)").
	selectAll("text").data(d3.range(numberOfSegments)).enter()

var label = selection.append("text")
    .attr("transform", function (d) {
    	return "translate(" + pos.centroid(d) + ")";
	})
    .attr("text-anchor", "middle")
    .text(function (d) {
    	return d * degrees + "°";
	});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【讨论】：

我明白了！非常感谢你！肯定会记下这一点！
添加这一行将使您的文本垂直对齐到文本的中心：.attr("alignment-baseline", "central")