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

【问题标题】：How can I draw simple lines (flows) between arcs in D3.js?如何在 D3.js 中的弧之间绘制简单的线条（流）？
【发布时间】：2017-03-06 12:31:16
【问题描述】：

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

仅供参考，我知道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);

这是一个简单的代码笔： http://codepen.io/ioan-ungurean/pen/aJNWMM

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

我认为您应该能够使用 d3.ribbon() 生成器 - https://github.com/d3/d3-chord/blob/master/README.md#ribbon。

只需将相同的值传递给startAngle 和endAngle 的源参数和目标参数，它就会为您提供一个路径字符串，您可以将其设置为路径元素数据。

【讨论】：

【解决方案2】：

// 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)

【讨论】：