D3.js：在“甜甜圈圖”弧線上放置文字

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

完整的工作代碼：

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