D3.js甜甜圈图... arc.centroid(d)不受d.innerRadius和d.outerRadius的影响 [英] D3.js donut chart... arc.centroid(d) is not influenced by d.innerRadius and d.outerRadius

问题描述

我正在创建一个甜甜圈(或Piechart)，我想将标签放置在该区域之外. 我为此创建了一个小提琴 http://jsfiddle.net/VeeTee/mA3V7/./p>

I'm creating a donut (or Piechart) and I want to place the labels just outside the area. I've created a fiddle http://jsfiddle.net/VeeTee/mA3V7/ for it.

arcs.append("svg:text")
    .attr("transform", function(d) {
        //this is where I want to make a translation to the outside border
        d.innerRadius = radius;
        d.outerRadius = height/2;
        return "translate(" + arc.centroid(d) +")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d, i) { return d.value.toFixed(2); });

arc.centroid(d)->总是给出相同的结果(因此翻译也相同)

arc.centroid(d) -> is always giving the same result (and therefore the same translation)

推荐答案

不确定您的意思是，它总是给您相同的结果，但是您可以通过将质心的坐标乘以来将标签放置在图表的外部1.5.代码是这样的.

Not sure what you mean by that it's always giving you the same result, but you can place the labels just outside the chart by multiplying the coordinates of the centroid by 1.5. The code is something like this.

.attr("transform", function(d) {
        var c = arc.centroid(d);
        return "translate(" + c[0]*1.5 +"," + c[1]*1.5 + ")";
    })

更新了jsfiddle 此处.

Updated jsfiddle here.

这篇关于D3.js甜甜圈图... arc.centroid(d)不受d.innerRadius和d.outerRadius的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！