是否可以在D3的圆环图中插入图标​​？ [英] Is it possible to insert an icon in the arc of a donut chart with D3?

问题描述

我有一个圆环图，有3个类别（弧）：Facebook（50％），Twitter（30％）和Instagram（20％）。绘制图表是相当容易，但我想知道如何插入一个图标在每个弧与社会网络的各自的符号（使用D3或甚至C3）。

I have a Donut Chart with 3 categories (arcs): Facebook (50%), Twitter(30%) and Instagram(20%). Plot the chart is fairly easy, but I want to know how to insert an icon in each arc with the respective symbol of the social network (using D3 or even C3).

谢谢！

推荐答案

添加图片只是使用

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

您还需要定位（ x 和 y ）。这些将默认为0，所以你可以使用 translate ，像这样找到弧的中心：

You'll also need to position (x and y). These will default to 0, so you could alternatively make use of a translate, something like this to find the center of the arc:

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

然而，这只是将图像的右上角固定到圆弧的中心，中心它需要使用图像的大小。这是完整的事情：

However, that just anchors the image's top-right corner to the centre of the arc, so to properly centre it you need to use the size of the image. Here's the full thing:

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/

请注意，我已将图片图表数据中的路径。你只需要去寻找合适的图标！

Note that I've included the image paths in the chart data. You just need to go and find proper icons!

这篇关于是否可以在D3的圆环图中插入图标​​？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！