Htykuut

var columns = ['data1', 'data2', 'data3', 'data4'];

var data = [150, 250, 300, 50];

var colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];



var chart = c3.generate({

  bindto: d3.select('#chart'),

  data: {

    columns: [[columns[0]].concat(data[0])],

    type: 'pie',

  },

  legend: {

    position: 'right',

    show: true

  },

  pie: {

    label: {

      threshold: 0.001,

      format: function(value, ratio, id) {

        return [id, d3.format(",.0f")(value), "[" + d3.format(",.1%")(ratio) + "]"].join(';');

      }

    }

  },

  color: {

    pattern: colors

  },

  onrendered: redrawLabelBackgrounds

});



function addLabelBackground(index) {

  //get label text element

  var textLabel = d3.select(".c3-target-" + columns[index] + " > text");

  //add rect to parent

  var labelNode = textLabel.node();

  if (labelNode /*&& labelNode.innerHTML.length > 0*/ ) {

    var p = d3.select(labelNode.parentNode).insert("rect", "text")

      .style("fill", colors[index]);

  }

}

addLabelBackground(0);

for (i = 1; i < columns.length; i++) {

  setTimeout(function(column) {

    chart.load({

      columns: [

        [columns[column]].concat(data[column]),

      ]

    });

    addLabelBackground(column);

  }, (i * 5000 / columns.length), i);

}



function redrawLabelBackgrounds() {

  //for all label texts drawn yet

  d3.selectAll(".c3-chart-arc > text").each(function(v) {

    // get d3 node

    var labelNode = d3.select(this).node();

    //check if label is drawn

    if (labelNode && labelNode.innerHTML.length > 0) {

      //build data

      var data = labelNode.innerHTML.split(';');

      d3.select(this).text("")

      data.forEach(function(i, n) {

        d3.select(this).append("tspan")

          .text(i)

          .attr("dy", (n === 0) ? 0 : "1.2em")

          .attr("x", 0)

          .attr("text-anchor", "middle");

      }, this);



      //get pos os the label text

      var pos = d3.select(this).attr("transform").match(/-?d+(.d+)?/g);

      //get surrounding box of the label

      var bbox = d3.select(this).node().getBBox();

      // TODO: mofify the pos of the text

			//pos[0]=

      //pos[1]=

      //d3.select(this).attr("transform", "translate(" + pos[0] + "," + pos[1] + ")");



      //now draw and move the rects

			var padding = 5;

      // TODO fix positioning bug

      d3.select(labelNode.parentNode).select("rect")

        .attr("transform", "translate(" + (pos[0] - (bbox.width + padding) / 2) + "," + (pos[1] - (bbox.height + padding) / 2) + ")")

        .attr("width", function(d) {

          return bbox.width + padding;

        })

        .attr("height", function(d) {

          return bbox.height + padding;

        });

    }

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"></script>



<div id="chart">



</div>