Svg 如何在d3.js piechart切片中添加不同的图像而不是文本_Svg_D3.js

Svg 如何在d3.js piechart切片中添加不同的图像而不是文本

svg d3.js

Svg 如何在d3.js piechart切片中添加不同的图像而不是文本,svg,d3.js,Svg,D3.js,我需要5个不同图像的HREF，而不是像现在这样用文本填充piedata变量。现在我只有一个，它在下面硬编码，而不是从变量数据中提取我还需要在圆的中心有一个图像。请给我一些想法 <!DOCTYPE html> <meta charset="utf-8"> <script src="http://d3js.org/d3.v3.min.js" ></script> <head> </head> <body

我需要5个不同图像的HREF，而不是像现在这样用文本填充piedata变量。现在我只有一个，它在下面硬编码，而不是从变量数据中提取

我还需要在圆的中心有一个图像。请给我一些想法

<!DOCTYPE html>
<meta charset="utf-8">



<script src="http://d3js.org/d3.v3.min.js" ></script>



<head>

</head>


<body>
<style>

path {
 stroke: #fff;
 fill-rule: evenodd;
}

text {
 font-family: Arial, sans-serif;
 font-size: 12px;
}

</style>

<script>


var width = 550,
    height = 550,
    radius = 250
    colors = d3.scale.ordinal()
        .range(['#336699 ','#336699 ','#ACD1E9','#ACD1E9','#ACD1E9']);

 var piedata = [
    {   label: "test",
        value: 50 },
    {   label: "",
    value: 50},
    {   label: "Jonathan",
    value: 50},
    {   label: "Lorenzo",
     value: 50},
    {   label: "Hillary",
    value: 50}
  ]


 var pie = d3.layout.pie()
     .value(function(d) {
     return d.value;
  })

var arc = d3.svg.arc()
   .outerRadius(250)
   .innerRadius(100)


var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate('+(width-radius)+','+(height-radius)+')')
    .selectAll('path').data(pie(piedata))
    .enter().append('g')
    .attr('class', 'slice')

 var slices = d3.selectAll('g.slice')
     .append('path')
     .attr('fill', function(d, i) {
        return colors(i);
     })
       .attr('d', arc)




 var imgs = svg.selectAll("image").data([0])
            imgs.enter()
            .append("svg:image")
            .attr("xlink:href", "http:/images/home-activities_09.jpg")
            .attr("x", "110")
            .attr("y", "35")
            .attr("width", "40")
            .attr("height", "40");

如果所有图像的宽度和高度都是恒定的，只需将图像URL添加到数据数组中，并使用数据函数动态设置xlink:href属性即可

var piedata = [
{
    label: "test",
    image: "http://placeimg.com/40/40/any",
    value: 50 
},
{   
    label: "",
    image: "http://placeimg.com/42/42/any",
    value: 50
},
{   
    label: "Jonathan",
    image: "http://placeimg.com/44/44/any",
    value: 50
},
{   
    label: "Lorenzo",
    image: "http://placeimg.com/46/46/any",
    value: 50
},
{   
    label: "Hillary",
    image: "http://placeimg.com/38/38/any",
    value: 50
}
]
....
g.append("g")
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.append("svg:image")
  .attr("xlink:href",function(d) {return d.data.image;})
  .attr("width",image_width)
  .attr("height",image_height)
  .attr("x",-1*image_width/2)
  .attr("y",-1*image_height/2);

这是一把小提琴：

另一方面，如果每个图像的大小不同，并且事先不知道宽度和高度值，则需要进行一些额外的工作。一种方法是预加载图像，以便在加载图像后知道宽度和高度值，并使用回调函数将其放置在饼图中

下面是一个处理动态图像尺寸的示例：

运气好吗？我也需要同样的帮助。这个答案可能会有帮助：。只需将.innerRadiusr-100更改为.innerRadius0，即可从油炸圈饼图转换为普通的Piehollo@OrionMelt。您能否解释一下，在本例中，如何将图像定位到更靠近中心的位置？