Кольцевая диаграмма D3.js arc.centroid(d) не зависит от d.innerRadius и d.outerRadius

Я создаю пончик (или круговую диаграмму) и хочу разместить метки за пределами этой области. Я создал для него скрипт http://jsfiddle.net/VeeTee/mA3V7/.

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) -> всегда дает один и тот же результат (и, следовательно, один и тот же перевод)


d3.js pie-chart donut-chart
person user1231712    schedule 17.04.2013    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Не уверен, что вы подразумеваете под тем, что он всегда дает вам один и тот же результат, но вы можете разместить метки сразу за пределами диаграммы, умножив координаты центроида на 1,5. Код примерно такой.

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

Обновлен jsfiddle здесь.

person Lars Kotthoff    schedule 17.04.2013
comment
Привет, спасибо за ответ... Но... знаете ли вы, почему установка d.innerRadius = radius; d.outerRadius = высота/2; во всех примерах (перед вызовом arc.centroid(d)) сделает смещение arc.centroid? - person user1231712; 17.04.2013
comment
Установка этих значений не имеет для меня никакого эффекта. - person Lars Kotthoff; 17.04.2013
comment
проверьте это... bl.ocks.org/Guerino1/2295263 .attr(transform, function (d) { // устанавливаем начало метки в центр дуги // мы должны установить их перед вызовом arc.centroid d.outerRadius = externalRadius + 50;// Установить внешнюю координату d.innerRadius = externalRadius + 45; // Установить внутреннюю координату return translate( + arc.centroid(d) + ); }) - person user1231712; 17.04.2013
comment
Вы устанавливаете как внутренний, так и внешний радиус явно в определении arc, поэтому изменения, которые вы делаете в этой функции, не имеют никакого эффекта. - person Lars Kotthoff; 17.04.2013