Drzewo/dendrogram ze złączami łokieć d3

Question

Jestem bardzo nowy d3.js (i SVG w ogóle), a chcę zrobić coś prostego: drzewo/dendrogram ze złączami kątowymi.

Mam cannibalised przykład d3 stąd: http://mbostock.github.com/d3/ex/cluster.html i chcę, aby uczynić go bardziej jak przykłady protovis tutaj:

• http://mbostock.github.com/protovis/ex/indent.html
• http://mbostock.github.com/protovis/ex/dendrogram.html

zrobiłem start tutaj: http://jsbin.com/ugacud/2/edit#javascript,html i myślę, że to Poniższy urywek to źle:

var diagonal = d3.svg.diagonal() 
.projection(function(d) { return [d.y, d.x]; }); 

Jednak nie ma oczywistego zamiennika, mógłbym użyć d3.svg.line, ale nie wiem jak poprawnie go zintegrować, a najlepiej, gdybym miał złącze na łokieć .... chociaż zastanawiam się, czy używam niewłaściwego Biblioteka do tego, ponieważ wiele przykładów d3, które widziałem, wykorzystuje siłę grawitacji do tworzenia wykresów obiektów zamiast drzew.

Answer 1

Wymień funkcję diagonal na niestandardowy generator ścieżek, używając "H" i "V" SVG path commands.

function elbow(d, i) { 
    return "M" + d.source.y + "," + d.source.x 
     + "V" + d.target.x + "H" + d.target.y; 
} 

Należy zauważyć, że w źródłowym i docelowym współrzędnych (xi Y) są zamienione. Przykład ten pokazuje układ z pozycji poziomej, jednak układ zawsze wykorzystuje ten sam system współrzędnych: x jest szerokość drzewa i Y jest głębokość drzewa. Tak więc, jeśli chcesz wyświetlić drzewo z liści (najniżej) węzłów na prawej krawędzi, a następnie trzeba zamienić x i y. Taka jest funkcja projekcji diagonalnej, ale w powyższej implementacji łokcia po prostu zakodowałem raczej zachowanie niż użycie configurable function.

Jak w:

svg.selectAll("path.link") 
    .data(cluster.links(nodes)) 
    .enter().append("path") 
    .attr("class", "link") 
    .attr("d", elbow); 

A przykład roboczych:

• http://bl.ocks.org/d/2429963/