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的示例。

如何在D3饼图中动态放置标签

0 个答案: