如何在D3.js中的弧线之间绘制简单线条（流动）？

Question

这是我的圈子。我想绘制圆弧之间的流线。我怎样才能在D3.js中做到这一点？

FYI我知道https://bl.ocks.org/mbostock/4062006。我想要的是，而不是那些宽和弦我想要简单的线条如此。

var arcGenerator = d3.arc() 
    .innerRadius(80) 
    .outerRadius(100) 
    .padAngle(.02) 
    .padRadius(100) 
    .cornerRadius(4); 

var arcData = [ 
    {startAngle: 0, endAngle: 1.3}, 
    {startAngle: 1.3, endAngle: 2.6}, 
    {startAngle: 2.6, endAngle: 3}, 
    {startAngle: 3, endAngle: 4}, 
    {startAngle: 4, endAngle: 2* Math.PI} 
]; 

d3.select('g') 
    .selectAll('path') 
    .data(arcData) 
    .enter() 
    .append('path') 
    .attr('d', arcGenerator); 

下面是一个简单codepen： http://codepen.io/ioan-ungurean/pen/aJNWMM

Answer 1

// draw the flow line 
let flowLine = d3.line() 
    .x((d) => { return d.x; }) 
    .y((d) => { return d.y; }) 
    .curve(d3.curveBundle.beta(0.5)); 

// append each flow to the svg 
layer0.selectAll('.flow') 
    .data(arrayOfCoordinates) // [[{1, 1},{{2, 2}}][{3, 3},{{4, 5}}]] - centroid coordinates for arcs in the circle 
    .enter().append('path') 
    .style('fill', 'none') 
    .style("stroke", '#000') 
    .style('stroke-width', '1px') 
    .attr('d', flowLine); 

详情：

• https://github.com/d3/d3-shape（curveBundle）

• http://bl.ocks.org/emmasaunders/c25a147970def2b02d8c7c2719dc7502（curveBundle）

Answer 2

我想你应该能够使用d3.ribbon()发电机 - https://github.com/d3/d3-chord/blob/master/README.md#ribbon。

对于源和目标参数，只需传递startAngle和endAngle的相同值，它将为您提供可设置为路径元素数据的路径字符串。