d3js Phân phối lại nhãn xung quanh biểu đồ hình tròn

Question

Tôi đang sử dụng d3.js để tạo biểu đồ bánh rán có nhãn ở bên ngoài. Sử dụng một lượng giác dựa trên trọng tâm của mỗi lát bánh, tôi định vị các nhãn.

g.append("g") 
     .attr("class", "percentage") 
     .append("text") 
      .attr("transform", function(d) 
       { 
        var c = arc.centroid(d); 
        var x = c[0]; 
        var y = c[1]; 
        var h = Math.sqrt(x*x + y*y); 
        return "translate(" + (x/h * obj.labelRadius) + ',' + (y/h * obj.labelRadius) + ")"; 
       } 
      ) 
      .attr("dy", ".4em") 
      .attr("text-anchor", function(d) 
       { 
        return (d.endAngle + d.startAngle)/2 > Math.PI ? "end" : "start"; 
       } 
      ) 
      .text(function(d) { return d.data.percentage+"%"; }); 

Điều cuối cùng tôi đang cố gắng hoàn thành là sắp xếp lại các nhãn nằm ngoài các cạnh của biểu đồ hình tròn, để ngăn trùng lặp.

Một trong những cách tôi đã cố gắng để giải quyết vấn đề là xác định thiết lập "điểm neo", trong đó nhãn có thể được bố trí, đảm bảo rằng họ sẽ không có sự chồng chéo. Vấn đề là lập bản đồ các centroids đến các neo và bảo quản một số cảm giác tương ứng trực quan giữa các lát và các nhãn (Đặc biệt khó khăn khi lát mỏng).

Hình ảnh trên cho thấy vị trí có thể của neo (centroids của lát hiển thị). Với những vị trí này, không thể có sự chồng chéo. Thêm sự phức tạp cho vấn đề là khi nhãn (chúng nằm ngang) gần đầu hoặc cuối của bánh, chúng dễ bị chồng chéo hơn, khi chúng ở bên phải hoặc bên trái của chiếc bánh .

Bất kỳ ý tưởng nào về cách tiếp cận vấn đề này?

[EDIT] Sau đề nghị của meetamit, tôi thực hiện như sau:

.attr("dy", function(d) 
{ 
    var c = arc.centroid(d); 
     var x = c[0]; 
     var y = c[1]; 
     var h = Math.sqrt(x*x + y*y); 
     var dy = y/h * obj.labelRadius; 
    dy=dy*fontSizeParam*.14/heightParam); 
    return (dy)+"em"; 
}) 

Nó giúp một chút, và đưa ra một số phòng để các nhãn, vẫn đang tìm kiếm một giải pháp mà sẽ bao gồm tất cả các trường hợp mặc dù. ..

Answer 1

Bạn không thể tạo hai vòng cung? một cho biểu đồ, và một cho các nhãn?

// first arc used for drawing the pie chart 
var arc = d3.svg.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 

// label attached to first arc 
g.append("text") 
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
    .attr("dy", ".35em") 
    .style("text-anchor", "middle") 
    .text(function(d) { return d.data.age; }); 

// second arc for labels 
var arc2 = d3.svg.arc() 
    .outerRadius(radius + 20) 
    .innerRadius(radius + 20); 

// label attached to second arc 
g.append("text") 
    .attr("transform", function(d) { return "translate(" + arc2.centroid(d) + ")"; }) 
    .attr("dy", ".35em") 
    .style("text-anchor", "middle") 
    .text(function(d) { return d.data.age; }); 

Answer 2

Có một tốt, thực dụng d3.js giải pháp dựa trên bằng cách lập trình John Williams trình bày ở đây:

https://www.safaribooksonline.com/blog/2014/03/11/solving-d3-label-placement-constraint-relaxing/

Nó sẽ làm việc tốt cho trường hợp với những hạn chế hợp lý, ví dụ tối đa 12 nhãn như đã thảo luận ở trên. Ngoài ra còn có các con trỏ trong bài viết cho các thuật toán nâng cao hơn, nhưng cách tiếp cận đơn giản này có thể thực sự, khi được sử dụng với đủ ràng buộc nội dung nhãn, cho kết quả có ngoại hình trực quan hơn các phương pháp khác.