没有层次的D3.js边缘捆绑 [英] D3.js Edge Bundling without Hierachy

问题描述

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

Holten's hierarchical edge bundling algorithm in D3 depends on hierarchical data.

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

有没有办法用非差异化数据的那些漂亮样条实现类似的圆形边缘捆绑图？

Is there a way to implement a similar circular edge bundling graph with those nice splines for non-hierarchical data?

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

Example: http://bl.ocks.org/sjengle/5432087 (Like this, but with splines...)

推荐答案

如果您的数据确实是非分层的，你可以将你的例子的drawCurves函数更改成如下：

If your data really is non-hierarchical, you could change the drawCurves function of your example into something like this:

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 供进一步参考。

To draw the lines with the d attribute the SVG specification provides. Consult https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d for further reference.

这篇关于没有层次的D3.js边缘捆绑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！