Zeichnen Linie Stecker für Raphael Shapes

Question

Ich zeichne Grafik ähnlich wie (http://raphaeljs.com/graffle.html). Allerdings möchte ich keine gekrümmten Verbindungslinien, sondern gerade Linien (mit einer Kurve an der Kreuzung), wie im unteren Bild gezeigt (von einem der anderen Post erhalten, aber dort keine Lösung bekommen). Da mein Diagramm komplex sein kann mit vielen zu vielen Beziehung, so Linien Connector kann durch viele Linien schneiden, so sollten Linien genug genug sein, um die ordentliche Verbindung zu zeigen. Hier ist mein Beispielcode. Kann jemand vorschlagen, dass ich mich annähere, um es zu erledigen?

connections = []; 
    var shapes = new Array(); 
    var texts = new Array(); 
    var moreinfo=new Array(); 
    var kx=20,ky=50; 
    var RecWidth=80; 
    var RecHeight=40; 
    var RecRadius=5; 

for (var i=0; i<= 5; i++) { 
    shapes[i]=r.rect(kx, ky, RecWidth, RecHeight,RecRadius); 
    texts[i]=r.text(kx + 35, ky + 10, "SlsMktGst"+i); 
    moreinfo[i]=r.text(kx + 35, ky + 30, "More"); 
    moreinfo[i].id="more"+i; 
    shapes[i].id="keylist"+i ; 
    shapes[i].attr({fill: '#000080', stroke: '#000080', "fill-opacity": 0, "stroke-width": 2, cursor: "move"}); 
    texts[i].attr({fill: '#0000A0', stroke: "none", "font-size": 12,"font-weight":"bold", cursor: "move"}); 
    moreinfo[i].attr({fill: '#0000A0', stroke: "none", "font-weight":"bold", cursor: "move"}); 

    kx=kx+125; 
    ky=ky+50; 
}; 

// zeichnen Anschlussleitungen mit Pfeil verwendet http://raphaeljs.com/graffle.html

for (var jj=0; jj<=shapes.length-1; jj++) { 

    if(jj != shapes.length-1){ 
     connections.push(r.connection(shapes[jj], shapes[jj+1], "#000", "#fff","Y")); 
    }; 
}; 

Aktuelles Ergebnis:

---

Erwartetes Ergebnis

Answer 1

In Ihrem Raphael Verbindungsmethode verwenden Ihre Variable Weg von

var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(","); 

dieser

var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(","); 

ändern Der Unterschied besteht darin, dass "C" hat zu "L" auf dem Weg geändert.

Nach raphael documentation

• C = Gebogene Linie

• L = Straight Line

Dank