Как динамически размещать метки на круговой диаграмме D3

Question

Я использую D3JS в своем приложении, и у меня есть круговая диаграмма в моем приложении.И из поиска в Интернете и на некоторых форумах я смог найти способ показа меток круговой диаграммы за пределами круговой диаграммы (ранее они были показаны внутри самой круговой диаграммы).Но даже несмотря на то, что я взял лейбл за пределами Pie, теперь он иногда перекрывается с Pie, когда название лейбла длинное.А также, когда кусочек пирога становится меньше, имена перекрываются друг с другом.Есть ли способ, чтобы эти метки динамически, без перекрытия.

Ниже приведен пример кода, который я использовал.

    var data2018 = [{
    "label": "Argentina",
    "value": 2
  },
  {
    "label": "Madagascar",
    "value": 10
  },
  {
    "label": "Sri Lanka",
    "value": 15
  },
  {
    "label": "United States of America",
    "value": 13
  },
  {
    "label": "Iceland",
    "value": 17
  },
  {
    "label": "Australia",
    "value": 23
  },
  {
    "label": "Bulgeria",
    "value": 7
  },
  {
    "label": "Saudi Arabia",
    "value": 8
  },
  {
    "label": "United Arab Emirates",
    "value": 5
  }
];



  var data = data2018;


const margin = 80;
const w = 1000 - 2 * margin;
const h = 550 - 2 * margin;
var r = h / 2;
var color = d3.scale.category20c();

d3.selectAll("#container-pie > *").remove();

var vis = d3.select('#container-pie').append('g').append('svg:svg').data([data]).attr("width", w).attr("height", h).append("svg:g").attr('x', 10).attr('y', 20)
  .attr("transform", "translate(" + w / 2 + "," + 1.2 * r + ")");

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

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);

var arcOver = d3.svg.arc()
  .outerRadius(r + 30);


// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d) {
    // log the result of the arc generator to show how cool it is :)
    console.log(arc(d));
    return arc(d);
  })
  .on("mouseenter", function(d) {
    d3.select(this)
      .attr("stroke", "white")
      .transition()
      .duration(1000)
      .attr("d", arcOver)
    // .attr("stroke-width",6);
  })
  .on("mouseleave", function(d) {
    d3.select(this).transition()
      .attr("d", arc)
      .attr("stroke", "none");
  })
  .on("click", function(d) {});

// add the text
//             arcs.append("svg:text").attr("transform", function(d){
//                 d.innerRadius = 0;
//                 d.outerRadius = r;
//                 return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "middle").text( function(d, i) {
//                 return data[i].label;}
//             );


var labelArc = d3.svg.arc()
  .outerRadius(r - 40)
  .innerRadius(r - 40);

arcs.append("svg:text").attr("transform", function(d) {
  var c = labelArc.centroid(d);
  return "translate(" + c[0] * 1.4 + "," + c[1] * 1.8 + ")";
}).attr("text-anchor", "middle").text(function(d, i) {
  return data[i].label;
});

Есть ли способ сделать что-то подобное.На следующем скриншоте показан пример из Highcharts.