D3.js Edge Bundling without Hierachy

Question

Алгоритм иерархического связывания Хертена в 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} `; 
    }); 
} 

Чтобы нарисовать линии с атрибутом d, указанным в спецификации SVG. Проконсультируйтесь с https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d для получения дополнительной информации.