我有一个包含 3 个类别(弧线)的圆环图:Facebook (50%)、Twitter(30%) 和 Instagram(20%)。绘制图表相当简单,但我想知道如何在每个弧中插入带有社交网络相应符号的图标(使用 D3 甚至 C3)。
谢谢!
最佳答案
添加图像只是使用的一个例子
...
.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/
请注意,我已将图像路径包含在图表数据中。您只需要去找合适的图标即可!
关于javascript - 是否可以使用 D3 在圆环图的弧形中插入图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26690852/