Label outside arc (Pie chart) d3.js

后端 未结 8 1425
日久生厌
日久生厌 2020-11-28 03:55

I\'m new to d3.js and I\"m trying to make a Pie-chart with it. I have only one problem: I can\'t get my labels outside my arcs... The labels are positioned with arc.centroid

8条回答
  •  陌清茗
    陌清茗 (楼主)
    2020-11-28 04:33

    This was the low-cost answer I was happy with. It pushes all the labels out horizontally (that's where I had the extra space):

    g.append("text")
      .attr("transform", function(d) { 
          var pos = arc.centroid(d); 
          return "translate(" + (pos[0] + (.5 - (pos[0] < 0)) * radius) + "," + (pos[1]*2) + ")"; 
      })
      .attr("dy", ".35em")
      .style("text-anchor", function(d) { 
          return arc.centroid(d)[0] > 0 ? "start" : "end";
       })
      .text(function(d) { return d.label; });
    

提交回复
热议问题