是否可以使用D3在圓環圖的圓弧中插入圖標​​？

Question

我有一個有3個類別（圓弧）的圓環圖：Facebook（50％），Twitter（30％）和Instagram（20％）。繪製圖表相當容易，但我想知道如何在社交網絡的各個符號（使用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/

請注意，我已經包括在圖表數據成像路徑。你只需要去找到適當的圖標！