Question

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

这是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) + ')'
    });

完整的工作代码：

＆＃13;

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

＆＃13;

D3.js：Placin'圆环图弧线上的文字

1 个答案: