javascript - D3pie.js labels.距中心的内部距离

Question

我使用http://d3pie.org/#docs-settings但没有中心到内部标签的距离这样的参数。有人可以尝试这样做吗？我想将内部标签移近圆圈的外边缘。非常感谢。

现在是这样:

需要:

Answer 1

您可以按照 https://stackoverflow.com/a/8270668/2314737 中的建议定义新弧来定位标签。然后应用centroid函数。

我定义了一个新弧newarc，其内半径等于外半径的2/3。

var newarc = d3.svg.arc()
    .innerRadius(2 * radius / 3)
    .outerRadius(radius);

JS代码如下:

var width = 300;
var height = 300;

var svg = d3.select("body").append("svg");
svg.attr("width", width)
    .attr("height", height);

var dataset = [11, 13, 18, 25, 31];

var radius = width / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(radius);

var pie = d3.layout.pie();

var arcs = svg.selectAll("g.arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + radius + ", " + radius + ")");

//Draw arc paths
var color = d3.scale.category10();

arcs.append("path")
    .attr("fill", function (d, i) {
    console.log(d);
    return color(i);
})
    .attr("stroke", "white")
    .attr("d", arc);


var newarc = d3.svg.arc()
    .innerRadius(2 * radius / 3)
    .outerRadius(radius);

// Place labels
arcs.append("text")
    .attr("transform", function (d) {
    return "translate(" + newarc.centroid(d) + ")";
})
    .attr("text-anchor", "middle")
    .attr("fill", "white")
    .text(function (d) {
    return d.value + "%";
});

这是一个工作演示:http://jsfiddle.net/user2314737/kvz8uev8/2/