2

次の例から始めました。

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()");

これにより、すべてのラベルが配列の最初の色になります。ただし、配列内で各ラベルを異なる色にする必要があります。ラベルにアクセスする方法がわからないので、ループして色を変更できます。

4

1 に答える 1

5

円弧に使用されたのと同じ塗りつぶし引数を追加するだけです。

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); });
于 2013-09-18T14:30:15.850 に答える