Question

我创建了一个饼图，它显示效果很好。

只是，我注意到一些文字被饼图片隐藏了。通过仔细观察，我注意到每个文本都可以用下一个切片绘制。

所以渲染顺序如下：切片1，文本1，切片2，文本2，切片3，文本3等...

如何制作，使渲染顺序为切片1，切片2，切片3 ...切片n。然后是文本1，文本2，文本3 ...文本n

然后文本将始终显示，因为它将在饼图的每个切片上绘制。

谢谢，这是我的代码

  function createChart(dom, newData, title) {

      d3.select(dom).selectAll("*").remove();

      // Define size & radius of donut pie chart
      var width = 450,
        height = 800,
        radius = Math.min(width, height) / 2;

      // Define arc colours
      var colour = d3.scale.category20();

      // Define arc ranges
      var arcText = d3.scale.ordinal()
              .rangeRoundBands([0, width], .1, .3);

      // Determine size of arcs
      var arc = d3.svg.arc()
        .innerRadius(radius - 130)
        .outerRadius(radius - 10);

      // Create the donut pie chart layout
      var pie = d3.layout.pie()
          .value(function (d) { return d.count; })
        .sort(null);

      // Append SVG attributes and append g to the SVG
      var mySvg = d3.select(dom).append("svg")
        .attr("width", width)
        .attr("height", height);

      var svg = mySvg
          .append("g")
          .attr("transform", "translate(" + radius + "," + radius + ")");

      var svgText = mySvg
          .append("g")
          .attr("transform", "translate(" + radius + "," + radius + ")");

      // Define inner circle
      svg.append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", 100)
        .attr("fill", "#fff") ;

      // Calculate SVG paths and fill in the colours
      var g = svg.selectAll(".arc")
              .data(pie(newData))
              .enter().append("g")
              .attr("class", "arc");

          // Append the path to each g
          g.append("path")
          .attr("d", arc)
          //.attr("data-legend", function(d, i){ return parseInt(newData[i].count) + ' ' + newData[i].emote; })
          .attr("fill", function(d, i) {
              return colour(i);
          });

          // Append text labels to each arc
          g.append("text")
          .attr("transform", function(d) {
              return "translate(" + arc.centroid(d) + ")";
          })
          .attr("dy", ".35em")
          .style("text-anchor", "middle")
          .attr("fill", "#fff")
              .text(function(d,i) { return newData[i].count > 0 ? newData[i].emote : ''; })

          // Append text to the inner circle
          svg.append("text")
            .style("text-anchor", "middle")
              .attr("fill", "#36454f")
            .text(function(d) { return title; })
            .style("font-size","16px")
            .style("font-weight", "bold");
  }

Answer 1

最简单的方法是为text标签提供自己的g并重新绑定数据：

// there own g
var textG = svg.selectAll(".labels")
  .data(pie(newData))
  .enter().append("g")
  .attr("class", "labels");

// Append text labels to each arc
textG.append("text")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .attr("fill", "#fff")
  .text(function(d, i) {
    return d.data.count > 0 ? d.data.emote : ''; // you can use d.data instead of indexing
  });

完整示例：

＆＃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 newData = [{
        count: 1,
        emote: "OneTwoThree"
      }, {
        count: 1,
        emote: "FourFiveSix"
      }, {
        count: 1,
        emote: "SevenEightNine"
      }, {
        count: 15,
        emote: "TenElevenTwelve"
      },

    ]

    // Define size & radius of donut pie chart
    var width = 450,
      height = 800,
      radius = Math.min(width, height) / 2;

    // Define arc colours
    var colour = d3.scale.category20();

    // Define arc ranges
    var arcText = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1, .3);

    // Determine size of arcs
    var arc = d3.svg.arc()
      .innerRadius(radius - 130)
      .outerRadius(radius - 10);

    // Create the donut pie chart layout
    var pie = d3.layout.pie()
      .value(function(d) {
        return d.count;
      })
      .sort(null);

    // Append SVG attributes and append g to the SVG
    var mySvg = d3.select('body').append("svg")
      .attr("width", width)
      .attr("height", height);

    var svg = mySvg
      .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

    var svgText = mySvg
      .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

    // Define inner circle
    svg.append("circle")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", 100)
      .attr("fill", "#fff");

    // Calculate SVG paths and fill in the colours
    var g = svg.selectAll(".arc")
      .data(pie(newData))
      .enter().append("g")
      .attr("class", "arc");

    // Append the path to each g
    g.append("path")
      .attr("d", arc)
      //.attr("data-legend", function(d, i){ return parseInt(newData[i].count) + ' ' + newData[i].emote; })
      .attr("fill", function(d, i) {
        return colour(i);
      });

    var textG = svg.selectAll(".labels")
      .data(pie(newData))
      .enter().append("g")
      .attr("class", "labels");

    // Append text labels to each arc
    textG.append("text")
      .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
      })
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .attr("fill", "#fff")
      .text(function(d, i) {
        return d.data.count > 0 ? d.data.emote : '';
      });
  </script>
</body>

</html>

＆＃13;

如何在饼图上正确绘制文字？

1 个答案: