Javascript 使用弧度质心将SVG图像放在圆弧中间但不出现
我目前正在尝试将svg:图像放置在弧的中心:Javascript 使用弧度质心将SVG图像放在圆弧中间但不出现,javascript,d3.js,Javascript,D3.js,我目前正在尝试将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") .at
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");
如果有人能给我一些建议,告诉我为什么它没有出现,我将不胜感激
谢谢:查看JSFIDLE,在尝试将
svg:image
元素附加到元素后,您正在创建path
元素。应该是相反的。您应该首先创建弧,然后附加图像
其次,据我所知,svg:path
元素不应该包含任何svg:image
标记。如果你在里面放一些,它似乎不会显示它们。相反,您应该使用classarc
创建svg:g
标记,然后使用这些标记放置svg:images
稍微修改您的JSFIDLE可能如下所示:
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");
var colors=['#909090'、'#A8A8A8'、'#B8B8'、'#D0D0'、'#E8E8'];
var arcs=svg.selectAll(“路径”);
对于(var z=0;zHi,谢谢cyon,但我只希望将svg:image放置在圆弧的中心-此时圆所在的位置,这可能吗?然后我最终希望开始像您刚才所做的那样将圆/名称实际移动到圆弧中。一个形状将放置在一个“V”形中。哦,在这种情况下,您可以执行svg.append(“svg:image”)
,将其与饼图放在同一组中。您可能需要将图像缩小,并使用attr
“x”和attr
“y”对其进行负位移.是的,这就是诀窍!虽然当我尝试对圆圈做同样的操作时,它们丢失了名称&有一个奇怪的轮廓?有什么想法。。。