D3.js: Biểu đồ hình tròn, chỉ thêm đường viền vào vùng outter

Question

Tôi có biểu đồ hình tròn trong D3 với nét vẽ để tách từng lát. Tuy nhiên, tôi muốn thêm một biên giới chỉ vào vùng outter của các slice, không phải trong một dòng liên tục mà là tôn trọng các khoảng trống được tạo ra bởi các nét trong các slice gốc. Xem hình ảnh của tôi để làm rõ. Bất kỳ suy nghĩ về cách làm điều đó?

Xem http://jsfiddle.net/4xk58/

arcs.append("path") 
.attr("fill", function (d, i) { 
return color(i); 
}) 
.attr("d", arc).style('stroke', 'white') 
.style('stroke-width', 5); 

Answer 1

Tôi đã giải quyết vấn đề này bằng cách thêm hai bộ vòm phụ, chiếm tối đa ba bộ. Cái đầu tiên là chiếc bánh bình thường, KHÔNG có nét

arcs.append("path") 
.attr("fill", function (d, i) { 
    return color(i); 
}).attr("d", arc); 

Thứ hai là biên giới tôi muốn thêm ở vị trí đầu tiên. Nó chỉ là một tập hợp các vòm xung quanh bản gốc của chúng ta nhưng với một màu khác. Chưa đột quỵ.

Và cuối cùng, archset thứ ba sẽ là một trong đó thực sự thu hút các nét Tôi muốn

//Draw phantom arc paths 
phantomArcs.append("path") 
    .attr("fill", 'white') 
    .attr("fill-opacity", 0.1) 
    .attr("d", arcPhantom).style('stroke', 'white') 
    .style('stroke-width', 5); 

Điều này làm cho hiệu quả, xem http://jsfiddle.net/odiseo/4xk58/4/

Answer 2

Bạn có thể mô phỏng này bằng cách thêm một bộ vòng cung có tác dụng như biên giới.

var arcBorder = d3.svg.arc() 
    .innerRadius(outerRadius) 
    .outerRadius(outerRadius + border); 

// etc 

arcs.append("path") 
    .attr("fill", "black") 
    .attr("d", arcBorder); 

Hoàn thành jsfiddle here.