score:4

Accepted answer

If you want to hack the nv.d3.js code to allow this, it would just take a few steps.

Define the image path for each element in the data set:

var testdata = [
{
  key: "<img src="+"./imgs/facebook.jpg"+">",
  y: 1,
  image_path: "./imgs/facebook.jpg"
},
{
  key: "<img src="+"./imgs/twitter.jpg"+">",
  y: 2,
  image_path: "./imgs/twitter.jpg"
}];

Then update the nv.models.pie code with something like this...

Add an anchor for the image:

pieLabels.enter().append("g").classed("nv-label",true)

  ...

  group.append('text')
      .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
      .style('fill', '#000')

  // Set up the anchor for the image
  group.append('image')
    .attr('height', 20)
    .attr('width', 20)
    .attr('y', '-10')
    .attr('x', '-10');

Hide the text label and show the image:

// Don't insert the label text.  We're using images.
// pieLabels.select(".nv-label text")
//       .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
//       .text(function(d, i) {
//         var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
//         var labelTypes = {
//           "key" : getX(d.data),
//           "value": getY(d.data),
//           "percent": d3.format('%')(percent)
//         };
//         return (d.value && percent > labelThreshold) ? labelTypes[labelType] : '';
//       });

// Show the image if the slice is large enough
pieLabels.select(".nv-label image")
  .attr('xlink:href', function(d, i) {
    var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
    return (d.data.image_path && percent > labelThreshold) ? d.data.image_path : '';
  });

You may need to adjust the numbers a bit depending upon your needs.


Related Query

More Query from same tag