D3.js：在“甜甜圈图”弧线上放置文字

Question

I am fairly new to D3.js and have been working on a D3 doughnut chart. 我对D3.js相当陌生，一直在研究D3甜甜圈图。 I tried to append text on the the arcs, but instead all of them cramp together at the middle. 我试图在圆弧上附加文字，但所有文字都在中间挤在一起。 I tried some fixes I found on StackOverflow but none of them seem to help. 我尝试了一些在StackOverflow上发现的修复程序，但似乎都没有帮助。

CODE: 码：

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

Here is data.tsv: 这是data.tsv：

value   domain
17142857    Increment
2857143 Timber
115310  Fruits

Answer 1

Few problems here. 这里的问题很少。

1.) You haven't given your pie function an accessor function: 1.）您尚未为pie函数赋予访问器函数：

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

2.) Your text labels also need to be bound to pie(data) since arc.centroid expects an data of that format. 2.）您的文本标签也需要绑定到pie(data)因为arc.centroid需要的是该格式的数据。 Once you do that the label is now d.data.domain : 完成后，标签现在为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) + ')'
    });

Full working code: 完整的工作代码：

 <!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：在“甜甜圈图”弧线上放置文字

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-11 13:53:46

D3.js：在“甜甜圈图”弧线上放置文字

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-11 13:53:46

解决方案1
0 已采纳 2015-11-11 13:53:46