D3 Baumdiagramm Gebogene Linie Startposition

Question

Zusammenfassung

Am Beispiel unten ich eine Datenbank angetrieben Baumansicht mit Blöcken von Informationen anstelle des Kreis Knoten erstellt haben.

Interactive d3.js tree diagram

Bitte siehe das Beispiel Screenshot unten:

Die Idee ist für die Linien aus, wo die Blockenden zu starten. Ich gehe davon aus, es ist etwas mit der folgenden Funktion zu tun:

// Custom projection 
var linkProjection = d3.svg.diagonal() 
    .source(function (d) { 
     return { "y": d.source.y, "x": d.source.x }; 
    }) 
    .target(function (d) { 
     return { "y": d.target.y, "x": d.target.x }; 
    }) 
    .projection(function (d) { 
     return [d.y, d.x]; 
    }); 

// Enter any new links at the parent's previous position. 
link.enter().insert("path", "g") 
    .attr("class", "link") 
    .style("fill", "none") 
    .style("stroke", "#d1d6da") 
    .style("stroke-width", "1") 
    .attr("d", function (d) { 
     var s = { x: source.x0, y: source.y0 }; 
     var t = { x: source.x0, y: source.y0 }; 
     return linkProjection({ source: s, target: t }); 
}); 

Ich habe versucht, das Hinzufügen der Blockbreite auf die y-Koordinate, aber obwohl es von der korrekten Position beginnt mit der Zeichnung endet am Anfang des Blocks wieder.

Irgendwelche Vorschläge?

Answer 1

Ohne mehr Code ist es schwer zu sagen, aber ich denke, es hat mit dem Koordinatensystem zu tun. x, y zeigen auf die Mitte des Objekts, denke ich. Du musst also y um die halbe Länge deiner Box nach rechts verschieben.

d. H. Die vorherige Position der Eltern (x, y) zeigt auf das Zentrum des Elternteils.