使用arc.Centroid将svg:image放在圆弧的中间-但不显示

Question

我现在正尝试在我的圆弧中心放置一个svg:图像：

  var arcs = svg.selectAll("path");

arcs.append("svg:image")
.attr("xlink:href", "http://www.e-pint.com/epint.jpg ")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("width", "150px") 
.attr("height", "200px");

如果有人能给我任何建议为什么它没有出现，我将不胜感激

谢谢：http://jsfiddle.net/xwZjN/17/

Answer 1

查看jsfiddle，您在尝试将svg:image元素附加到path元素之后创建了这些元素。应该是另一种方式。您应该首先创建圆弧，然后附加图像。

第二，据我所知，svg:path元素不应该包含任何svg:image标记。如果你把一些放在里面，它似乎不会显示它们。相反，您应该使用类arc创建svg:g标记，然后使用这些标记来放置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");

我还减小了图像的大小，并对它们进行了偏移，以便它们适合弧形。