查看 jsfiddle,您是path
在尝试将元素附加到元素之后创建元素svg:image
。应该反过来。您应该首先创建弧线,然后附加图像。
其次,据我所知,该svg:path
元素不应包含任何svg:image
标签。如果你在里面放一些,它似乎不会显示它们。相反,您应该做的是创建svg:g
带有类的标签,arc
然后使用它们来放置svg:images
稍微修改你的 jsfiddle 可能看起来像这样:
var colours = ['#909090','#A8A8A8','#B8B8B8','#D0D0D0','#E8E8E8'];
var arcs = svg.selectAll("path");
for (var z=0; z<30; z++){
arcs.data(donut(data1))
.enter()
//append the groups
.append("svg:g")
.attr("class", "arc")
.append("svg:path")
.attr("fill", function(d, i) { return colours[(Math.floor(z/6))]; })
.attr("d", arc[z])
.attr("stroke","black")
}
//here we append images into arc groups
var pics = svg.selectAll(".arc").append("svg:image")
.attr("xlink:href", "http://www.e-pint.com/epint.jpg ")
.attr("transform", function(d,i) {
//since you have an array of arc generators I used i to find the arc
return "translate(" + arc[i].centroid(d) + ")"; })
.attr("x",-5)
.attr("y",-10)
.attr("width", "10px")
.attr("height", "20px");
我还减小了图像的大小并偏移它们以使它们适合弧线。