D3.js:Placcin'圆环图圆弧上的文字

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

本文关键字：文字 圆环图 js Placcin D3      更新时间：2023-09-26

我是D3.js的新手，一直在制作D3甜甜圈图。我试着在弧线上加上文字，但所有的弧线都在中间挤在一起。我尝试了在StackOverflow上找到的一些修复程序，但似乎都没有帮助。

代码：

    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); };
    });
  };
}

这是数据.tsv:

value   domain
17142857    Increment
2857143 Timber
115310  Fruits

这里很少有问题。

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>

相关文章：