Dibujando múltiples bordes entre dos nodos con d3

He estado siguiendo el código de Mike Bostock de este ejemplo para aprender a dibujar gráficos dirigidos en d3 y me preguntaba cómo estructuraría el código para poder agregar múltiples bordes entre dos nodos en el gráfico. Por ejemplo, si el conjunto de datos en el ejemplo anterior se definió como

var links = [{source: "Microsoft", target: "Amazon", type: "licensing"}, {source: "Microsoft", target: "Amazon", type: "suit"}, {source: "Samsung", target: "Apple", type: "suit"}, {source: "Microsoft", target: "Amazon", type: "resolved"}]; 

y luego ejecutar el código, todo lo que veo es una línea. Todas las rutas se dibujan correctamente en el código html, sin embargo, todas tienen las mismas coordenadas y orientación, lo que hace que la imagen se vea como 1 línea. ¿Qué tipo de reestructuración de código tendría que hacerse en este ejemplo para permitir que los 3 bordes no se dibujen uno encima del otro?

De hecho, la visualización original es un excelente ejemplo de un método para mostrar enlaces múltiples entre nodos, es decir, usando arcos en lugar de rutas directas, para que pueda ver los enlaces entrantes y salientes.

Este concepto se puede ampliar para mostrar múltiples de cada uno de estos tipos de enlaces mediante el cambio de los valores de radio de los siguientes elementos de ruta svg (arco) que representan el enlace. Un ejemplo básico siendo

 dr = 75/d.linknum; 

Donde d.linknum representa el número del enlace sucesivo. dr se usa más tarde como las cantidades rx y ry para el arco que se dibuja.

Implementación completa aquí: http://jsfiddle.net/7HZcR/3/

enter image description here

Aquí está la fuente de la respuesta anterior si alguien alguna vez la necesita:

 var links = [{source: "Microsoft", target: "Amazon", type: "licensing"}, {source: "Microsoft", target: "Amazon", type: "suit"}, {source: "Samsung", target: "Apple", type: "suit"}, {source: "Microsoft", target: "Amazon", type: "resolved"}]; //sort links by source, then target links.sort(function(a,b) { if (a.source > b.source) {return 1;} else if (a.source < b.source) {return -1;} else { if (a.target > b.target) {return 1;} if (a.target < b.target) {return -1;} else {return 0;} } }); //any links with duplicate source and target get an incremented 'linknum' for (var i=0; i 
 path.link { fill: none; stroke: #666; stroke-width: 1.5px; } marker#licensing { fill: green; } path.link.licensing { stroke: green; } path.link.resolved { stroke-dasharray: 0,2 1; } circle { fill: #ccc; stroke: #333; stroke-width: 1.5px; } text { font: 10px sans-serif; pointer-events: none; } text.shadow { stroke: #fff; stroke-width: 3px; stroke-opacity: .8; } 
  
Intereting Posts