在D3图表上切断顶部标签

D3新手在这里。简单的问题。我在外面有一个带有标签的甜甜圈图表。自SVG太小以来，顶级标签已被删除。我已经扩展了其他方面的SVG填充，但不知道如何增加它的顶部。在D3图表上切断顶部标签

 var w = 400, 
      h = 400, 
      r = Math.min(w, h)/2, 
      labelr = r + 30, // radius for label anchor 
      donut = d3.layout.pie(), 
      arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r); 

     var vis = d3.select(".impact-chart") 
     .append("svg:svg") 
      .data([data]) 
      .attr("width", w + 175) 
      .attr("height", h + 35); 

     var arcs = vis.selectAll("g.arc") 
      .data(donut.value(function(d) { return d.val })) 
     .enter().append("svg:g") 
      .attr("class", "arc") 
      .attr("transform", "translate(" + (r + 80) + "," + r + ")"); 

     var color = d3.scale.ordinal() 
      .range(["#C1B398", "#605951", "#FBEEC2", "#61A6AB", "#ACCEC0", "#bbb"]); 

     arcs.append("svg:path") 
      .attr("fill", function(d, i) { return color(i); }) 
      .attr("d", arc); 

     arcs.append("svg:text") 
      .attr("transform", function(d) { 
       var c = arc.centroid(d), 
        x = c[0], 
        y = c[1], 
        // pythagorean theorem for hypotenuse 
        h = Math.sqrt(x*x + y*y); 
       return "translate(" + (x/h * labelr) + ',' + 
       (y/h * labelr) + ")"; 
      }) 
      .attr("dy", ".35em") 
      .attr("text-anchor", function(d) { 
       // are we past the center? 
       return (d.endAngle + d.startAngle)/2 > Math.PI ? 
        "end" : "start"; 
      }) 
      .text(function(d, i) { return d.data.name;});

来源

2014-03-06 Ben Davidow

请参阅我编辑的回答您的上一个问题： http://stackoverflow.com/a/22237336/1082169 –

您的翻译为您的图表属性在SVG元素的顶部设置它。这里是X位置，但不是在y偏移...

.attr("transform", "translate(" + (r + 80) + "," + r + ")");

你需要做的是增加一个偏移：

.attr("transform", "translate(" + (r + 80) + "," + (r + 80) + ")");

或者，你可以居中：

attr("transform", "translate(" + 1.5*r + "," + 1.5*r + ")")

来源

2014-03-06 22:58:37

在D3图表上切断顶部标签

回答

相关问题