D3.js Groupement d'arêtes sans hiérarchie

Question

L'algorithme de groupement de bord hiérarchique de Holten dans D3 dépend de données hiérarchiques.

Exemple: http://bl.ocks.org/mbostock/7607999

est-il un moyen de mettre en œuvre un bord circulaire semblable graphique avec ces belles flottage splines pour les données non-hiérarchiques?

Exemple: http://bl.ocks.org/sjengle/5432087 (comme ça, mais avec des cannelures ...)

Answer 1

Si vos données que vous pourriez est vraiment non-hiérarchique, changer la fonction drawCurves de votre exemple en quelque chose comme ceci:

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} `; 
    }); 
} 

Pour dessiner les lignes avec l'attribut d, la spécification SVG fournit. Consultez https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d pour plus de référence.