Question

而不是像现在一样用文本填充piedata变量，我需要为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");

Answer 1

如果所有图像的宽度和高度不变，只需将图像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);

这是一个工作小提琴：http://jsfiddle.net/LLwr4q7s/

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

以下是动态图片尺寸的示例：http://jsfiddle.net/LLwr4q7s/2/

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

1 个答案: