How to add icons in dc.js piechart slices instead texts

Question

I have been working with dc.js for a year now. Recently I have been tasked to implement a pie chart as below:

user requirement image

I want to replace the text labels in the pie chart slices with appropriate images.

I saw this implemented in pure d3.js. Can someone help me translate the implementation to dc.js?

pie
    .width(600)
    .height(500)
    .radius(200)
    .innerRadius(120)
    .dimension(disastersDimension)
    .group(disastersGroup)
    .on("filtered", function (chart, filter) {
      var sel = filter;
      let percentage = 0,
        value = 0;
      let disastersBuffer = [];
      totalAmount = 0;

      pie.selectAll("text.pie-slice").text((d) => {
        percentage = dc.utils.printSingleValue(
          ((d.endAngle - d.startAngle) / (2 * Math.PI)) * 100
        );
        disastersBuffer.push({ ...d.data, percentage });
        totalAmount += parseFloat(d.data.value);
      });

      filterPiechart(sel, percentage, totalAmount, disastersBuffer, value);
    })
    .on("renderlet", (chart) => {
      if (!chart.selectAll("g.selected")._groups[0].length) {
        chart.filter(null);
        filterPiechart("", 100, totalAmount, [], 0);
      }
      var arc = chart.radius(250).innerRadius(100);
      console.log(arc);
      var g = chart.selectAll(".pie-slice");

      chart
        .selectAll(".pie-slice")
        .append("image")
        .attr("xlink:href", "img/disasters/Floods.png")
        .attr("transform", "translate(-10,10) rotate(315)")
        .attr("width", "26px")
        .attr("hight", "26px")
        .style("background-color", "white")
        .attr("x", function (d) {
          var bbox = this.parentNode.getBBox();
          return bbox.x;
        })
        .attr("y", function () {
          var bbox = this.parentNode.getBBox();
          return bbox.y;
        });

      g.append("g")
        .append("svg:image")
        .attr("xlink:href", function (d) {
          let filteredImage = self.piedata.find(
            (i) => i.label == d.data.key
          );
          let image = filteredImage ? filteredImage.image : "";
          return image;
        })
        .attr("width", 30)
        .attr("height", 40)
        .attr("x", function (d) {
          var bbox = this.parentNode.getBBox();
          return bbox.x;
        })
        .attr("y", function (d) {
          var bbox = this.parentNode.getBBox();
          return bbox.y;
        });
    })
    .addFilterHandler(function (filters, filter) {
      filters.length = 0; // empty the array
      filters.push(filter);
      return filters;
    });

user_10756489 · Answer

I took the fiddle and added a couple of 'Meteoicons' I found here.

(Of course, those icons are taken as an example and I have no permission to use them commercially)

The icons are stored in a separated elements. To render an icon, just select its root element and copy its content to another you create in your piechart:

g.append("g")
  .attr("transform", d => `translate(${arc.centroid(d)}) scale(0.25)`)
  .append('g')
  .attr('transform', 'translate(-256,-256)') // The original icons are 256 x 256
  .html(d => d3.select(`#meteo-icon-${... some attribute of d ...} > g`).html())

The code is for demonstration purposes only, you will need to modify it for your needs.

See the result in the snippet below:

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

var image_width=40,
    image_height=40;

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
    }
  ]


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)+')');


var g = svg.selectAll(".arc")
      .data(pie(piedata))
    .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d,i) { return colors(i); });

  g.append("g")
      .attr("transform", d => `translate(${arc.centroid(d)}) scale(0.25)`)
      .append('g')
      .attr('transform', 'translate(-256,-256)')
  .html(() => d3.select(`#meteo-icon-${Math.random() < 0.5 ? 1 : 2} > g`).html())
.selectAll('path')
.style('fill', 'orange');

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

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

.meteo-icon {
  display: none;
}

user_676195 · Answer

First, apologies for an incomplete example, but I ran out of time and I think this shows the principles.

I agree with @MichaelRovinsky that SVG icons would be better than images, but I couldn't find a CDN for SVG icons that would be suitable for the example, and I think the principles are exactly the same, since you could embed SVGs as image just as well.
Using placeimg.com for this purpose leads to weird results because the same URL will yield different results when read twice, so e.g. two slices may end up with the same image, and images change when the chart redraws.

Luckily these are both beside the point of customizing dc.js!

Adding things to dc.js pie slices

It would be nice if dc.js used an svg g group element to put the text in. Then we could just add to it and the position would be correct.

Instead, we have to add our image element and read the corresponding data from the pie label to get the placement:

  chart.on('pretransition', chart => {
    let labelg = chart.select('g.pie-label-group');
    let data = labelg.selectAll('text.pie-label').data();
    console.log('data', data);

Then we can add image elements in the same layer/g:

    let pieImage = labelg.selectAll('image.pie-image');
    let arcs = chart._buildArcs();
    pieImage.data(data)
      .join(
        enter => enter.append('image')
                    .attr('class', 'pie-image')
                    .attr('x', -19) 
                    .attr('y', -19))
       .attr('href', d => images[d.data.key === 'Others' ? 'Others' : d.data.key.slice(4)])
       .attr('transform', d => chart._labelPosition(d, arcs));
  });

Notice that the attributes which only need to be set once (on enter) are inside the join call, and the attributes which need to be set every redraw (on update) are outside the join call.

x and y are negative one half the image size to center the images.

I used an object to store the URLs but you could use whatever.

Demo fiddle

Limitation

As with any customization of the pie chart, this doesn't account for animations well. The images will move before the animation is complete. If you care, I think I wrote an answer some years ago which dealt with this properly. I can probably dig it up but it was quite complicated and IMHO not worth it.

How to add icons in dc.js piechart slices instead texts

2 Answers

Adding things to dc.js pie slices

Limitation