javascript - D3 图表上的顶部标签被切断

Question

这里是 D3 新手。简单的问题。我有一个 donut chart ，外面有标签。由于 SVG 太小，顶部标签被剪掉了。我已经在另一侧扩展了 SVG 填充，但不确定如何在顶部增加它。

http://jsfiddle.net/qA6t6/9/

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

Answer 1

图表的翻译属性将其设置在 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 + ")")