D3.js：将文本放置在圆环图的圆弧上

Question

我是 D3.js 的新手，一直在研究 D3 圆环图。我试图在弧形上附加文本，但它们都在中间抽筋了。我尝试了一些在 Whosebug 上找到的修复程序，但 none 似乎有帮助。

代码：

    var margin = {top :30, right: 30, bottom: 40, left: 50}

var height = 600,
    width = document.getElementById('chart').clientWidth;

var outerRadius = height / 2 - 20,
    innerRadius = outerRadius / 2,
    cornerRadius = 10;


var pie = d3.layout.pie()
    .sort(null)
    .padAngle(.02);


var arc = d3.svg.arc()
    .padRadius(outerRadius)
    .innerRadius(innerRadius);

d3.tsv("data.tsv", function(error, data) {


var svg = d3.select("#chart").append("svg")
    .style('background','#E7E0CB')
    .attr("width", width)
    .attr("height", height)
    .append("g")
     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


svg.selectAll("path")
    .data(pie(thedata))
  .enter().append("g")
    .attr('class', 'slice')

    var slice = d3.selectAll('g.slice')
            .append('path')
    .each(function(d) { d.outerRadius = outerRadius - 20; })
    .attr("d", arc)
    .attr('fill', function(d, i){return colors(i)})
    .on("mouseover", arcTween(outerRadius, 0))
    .on("mouseout", arcTween(outerRadius - 20, 150));

    var text = d3.selectAll('g.slice')
        .append('text')
        .data(data)
        .text(function(d , i){
            return d.domain;
        })
        .attr('fill', 'white')
        .attr('text-anchor', 'middle')
        .attr('transform', function(d, i){
            d.innerRadius =innerRadius;
            d.outerRadius = outerRadius;
            return 'translate('+arc.centroid(d)+')'
        })


})
function arcTween(outerRadius, delay) {
  return function() {
    d3.select(this).transition().delay(delay).attrTween("d", function(d) {
      var i = d3.interpolate(d.outerRadius, outerRadius);
      return function(t) { d.outerRadius = i(t); return arc(d); };
    });
  };
}

这里是data.tsv:

value   domain
17142857    Increment
2857143 Timber
115310  Fruits

Answer 1

这里没有什么问题。

1.) 你还没有给你的 pie 函数一个访问函数：

 var pie = d3.layout.pie()
  .sort(null)
  .padAngle(.02)
  .value(function(d) { return d.value; }); //<-- add this

2.) 您的文本标签也需要绑定到 pie(data)，因为 arc.centroid 需要该格式的数据。一旦你这样做了，标签现在是 d.data.domain:

var text = d3.selectAll('g.slice')
    .append('text')
    .data(pie(data))
    .text(function(d, i) {
      return d.data.domain;
    })
    .attr('fill', 'white')
    .attr('text-anchor', 'middle')
    .attr('transform', function(d, i) {
      d.innerRadius = innerRadius;
      d.outerRadius = outerRadius;
      return 'translate(' + arc.centroid(d) + ')'
    });

完整的工作代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
    var margin = {
      top: 30,
      right: 30,
      bottom: 40,
      left: 50
    }

    var height = 600,
      width = 600;

    var outerRadius = height / 2 - 20,
      innerRadius = outerRadius / 2,
      cornerRadius = 10;


    var pie = d3.layout.pie()
      .sort(null)
      .padAngle(.02)
      .value(function(d) {
        return d.value;
      });


    var arc = d3.svg.arc()
      .padRadius(outerRadius)
      .innerRadius(innerRadius);

    var colors = d3.scale.category10();

    //d3.csv("data.csv", function(error, data) {

    var data = [{
      "value": "17142857",
      "domain": "Increment"
    }, {
      "value": "2857143",
      "domain": "Timber"
    }, {
      "value": "115310",
      "domain": "Fruits"
    }];

    var svg = d3.select("body").append("svg")
      .style('background', '#E7E0CB')
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


    svg.selectAll("path")
      .data(pie(data))
      .enter().append("g")
      .attr('class', 'slice')

    var slice = d3.selectAll('g.slice')
      .append('path')
      .each(function(d) {
        d.outerRadius = outerRadius - 20;
      })
      .attr("d", arc)
      .attr('fill', function(d, i) {
        return colors(i)
      })
      .on("mouseover", arcTween(outerRadius, 0))
      .on("mouseout", arcTween(outerRadius - 20, 150));

    var text = d3.selectAll('g.slice')
      .append('text')
      .data(pie(data))
      .text(function(d, i) {
        return d.data.domain;
      })
      .attr('fill', 'white')
      .attr('text-anchor', 'middle')
      .attr('transform', function(d, i) {
        d.innerRadius = innerRadius;
        d.outerRadius = outerRadius;
        return 'translate(' + arc.centroid(d) + ')'
      })


    //    })

    function arcTween(outerRadius, delay) {
      return function() {
        d3.select(this).transition().delay(delay).attrTween("d", function(d) {
          var i = d3.interpolate(d.outerRadius, outerRadius);
          return function(t) {
            d.outerRadius = i(t);
            return arc(d);
          };
        });
      };
    }
  </script>
</body>

</html>

D3.js：将文本放置在圆环图的圆弧上

D3.js: Placin' the text on the arcs of the doughnut chart

javascript

data-visualization

d3.js