Как раскрасить метки для круговой диаграммы в D3?

Я начал со следующего примера:

http://jsfiddle.net/nrabinowitz/GQDUS/

Я пытаюсь сделать так, чтобы метки для каждой дуги были цветом дуги.

Я довел его до того, что он окрашивает все этикетки в один и тот же цвет. Но теперь я знаю, как получить доступ к каждой отдельной метке и изменить цвет.

В моем коде я сделал следующее для последней строки:

    arcs.append("svg:text").attr("transform", function (d){var c = arc.centroid(d); x =   c[0]; y = c[1]; h = Math.sqrt(x*x + y*y);  return "translate(" + (x/h * 100) + ',' + (y/h * 90) + ")";}).text(function(d){return Math.round((d.data/total)*100)+"%";}).attr("text-anchor","middle").attr("fill","color_data.pop()");

Это делает все метки первым цветом в моем массиве. Однако мне нужно, чтобы каждая метка была другого цвета в массиве. Я просто не знаю, как получить доступ к меткам, чтобы я мог прокрутить и изменить цвет.


javascript svg d3.js pie-chart donut-chart
person JS noob    schedule 18.09.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Просто добавьте тот же аргумент заполнения, который использовался для дуг, например.

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("fill", function(d, i) { return color(i); })
    .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.value.toFixed(2); });
person Robert Longson    schedule 18.09.2013
comment
Ух ты! Спасибо. Я очень ценю помощь! - person JS noob; 18.09.2013
comment
извините, новичок в публикации на stackoverflow. - person JS noob; 25.09.2013
comment
Как бы я добавил небольшой пробел между всеми дугами в ссылке js fiddle выше? - person JS noob; 02.10.2013
comment
Добавьте дополнительные дуги, которые могут быть белыми или прозрачными? Если вы застряли, задайте другой вопрос с более подробной информацией. - person Robert Longson; 02.10.2013