Расстояние между D3 между дугами

Question

Я довольно новичок в диаграмме D3, и я создал свою первую диаграмму пончика, используя D3, но мне было интересно, есть ли в любом случае, я могу добавить пробелы/интервалы между каждой дугой.

Я знаю, что может снизить начальные и конечные углы каждой дуги, например,

дуги 1: от 90degree до 120 для дуги 2: от 120degree к 150degree

уменьшить углы выше как дуги 1 : от 92degree к 118degree дуги 2: от 122 до степени 148degree и так далее ..

, но мне интересно, если есть более простой способ поставить некоторые пробелы.

Это мой код, и вы можете увидеть полный код в JSfiddle.

var vis = d3.select(elementSelector); 
var arc = d3.svg.arc() 
.innerRadius(svgInnerRadius) 
.outerRadius(svgOuterRadius) 
.startAngle(function(d){return anglePercentage(d[0]);}) 
.endAngle(function(d){return anglePercentage(d[1]);}); 
... 

http://jsfiddle.net/24FaQ/ 

Большое вам спасибо.

Answer 1

Если вы рисуете поверх сплошного фона (белого или другого), вы можете добавить штрих для достижения этого эффекта без изменения углов.

Вот modified fiddle.

vis.selectAll("path") 
    .data(data) 
    .enter() 
    .append("path") 
    .attr("d", arc) 
    .style("fill", function(d){return color(d[2]);}) 
    .attr('stroke', '#fff') // <-- THIS 
    .attr('stroke-width', '6') // <-- THIS 
    .attr("transform", "translate(" + svgWidth/2 + ", " + svgHeight/2 + ")"); 

Это касается хода всех краев, включая изогнутые. Если вам нужно это избежать, вам нужно вместо этого нарисовать и поместить line с белыми штрихами в начале/конце каждого фрагмента.

Answer 2

Это на самом деле то, что вы ищете:

http://bl.ocks.org/mbostock/f098d146315be4d1db52

var pie = d3.layout.pie() 
    .padAngle(.02);