没有层次结构的 D3.js 边缘捆绑

Question

Holten 在 D3 中的分层边缘捆绑算法依赖于分层数据。

示例：http://bl.ocks.org/mbostock/7607999

有没有办法用那些漂亮的样条线为非分层数据实现类似的圆形边缘捆绑图？

示例：http://bl.ocks.org/sjengle/5432087（像这样，但带有样条线...）

Answer 1

如果您的数据确实是非分层的，您可以将示例的 drawCurves 函数更改为如下所示：

function drawCurves(links) {

  d3.select("#plot").selectAll(".link")
    .data(links)
    .enter()
    .append("path")
    .attr("class", "link")
    .attr("d", function(d){
      var lineData = [
      {
        x: Math.round(d.target.x),
        y: Math.round(d.target.y)
      }, {
      x: Math.round(d.target.x) - Math.round(d.target.x)/3,
        y: Math.round(d.target.y) - Math.round(d.target.y)/3
      }, 
      {
      x: Math.round(d.source.x) - Math.round(d.source.x)/3,
        y: Math.round(d.source.y) - Math.round(d.source.y)/3
      },{
        x: Math.round(d.source.x),
        y: Math.round(d.source.y)
      }];
      return `M${lineData[0].x},${lineData[0].y}C${lineData[1].x},${lineData[1].y},${lineData[2].x},${lineData[2].y},${lineData[3].x},${lineData[3].y} `;
    });
}

使用 SVG 规范提供的 d 属性绘制线条。如需进一步参考，请咨询https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d。