javascript - D3 でドーナツ チャートの円弧にアイコンを挿入することはできますか?

Question

Facebook (50%)、Twitter (30%)、Instagram (20%) の 3 つのカテゴリ (弧) を持つドーナツ チャートがあります。チャートをプロットするのはかなり簡単ですが、ソーシャルネットワークのそれぞれのシンボルを使用して各アークにアイコンを挿入する方法を知りたいです (D3 または C3 を使用)。

ありがとう！

Answer 1

画像の追加は、

...
.append("svg:image")
.attr("xlink:href","myimage.png")
.attr("width", "32")
.attr("height", "32");

x(と)も配置する必要がありますy。これらはデフォルトで 0 になるため、代わりに次のtranslateような を使用して円弧の中心を見つけることができます。

.attr("transform", function(d){
    return "translate(" + arc.centroid(d) + ")";
});

ただし、これは画像の右上隅を弧の中心に固定するだけなので、適切に中央に配置するには、画像のサイズを使用する必要があります。ここに完全なものがあります：

var image_width = 32;
var image_height = 32;

// add the image
arcs.append("svg:image").attr("transform", function(d){
    // Reposition so that the centre of the image (not the top left corner)
    // is in the centre of the arc
    var x = arc.centroid(d)[0] - image_width/2;
    var y = arc.centroid(d)[1] - image_height/2;
    return "translate(" + x + "," + y + ")";
})
.attr("xlink:href",function(d) { return d.data.icon;})
.attr("width", image_width)
.attr("height", image_height);

例を次に示します: http://jsfiddle.net/henbox/88t18rqg/6/

グラフ データに画像パスを含めたことに注意してください。適切なアイコンを探しに行くだけです。