是否可以使用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/

请注意，我已经包括在图表数据成像路径。你只需要去找到适当的图标！