Дърво/дендрограма с лакътни конектори в d3

Аз съм много нов в d3.js (и SVG като цяло) и искам да направя нещо просто: дърво/дендрограма с ъглови конектори.

Канибализирах примера за d3 от тук:http://mbostock.github.com/d3/ex/cluster.html и искам да го направя повече като примерите за protovis тук:

Започнах тук: http://jsbin.com/ugacud/2/edit#javascript,html и мисля, че следният фрагмент е грешен:

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

Въпреки това няма очевидна замяна, бих могъл да използвам d3.svg.line, но не знам как да го интегрирам правилно и в идеалния случай бих искал лакътен конектор.... въпреки че се чудя дали използвам грешната библиотека за това, тъй като много от примерите за d3, които съм виждал, използват гравитационната сила, за да правят графики на обекти вместо дървета.


javascript svg d3.js dendrogram
person James B    schedule 20.04.2012    source източник

Отговори (1)


arrow_upward
26
arrow_downward

Заменете функцията diagonal с персонализиран генератор на път, като използвате "H" и "V" на SVG команди за път.

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

Имайте предвид, че координатите на източника и целта (x и y) са разменени. Този пример показва оформлението с хоризонтална ориентация, но оформлението винаги използва една и съща координатна система: x е ширината на дървото, а y е дълбочината на дървото . Така че, ако искате да покажете дървото с листовите (най-долните) възли в десния край, тогава трябва да размените x и y. Това прави функцията за проекция на диагонала, но в горната реализация на лакътя просто кодирах поведението, вместо да използвам конфигурируема функция.

As in:

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

И работещ пример:

person mbostock    schedule 20.04.2012
comment
Благодаря, Майк, надявах се да видиш този въпрос! Ще пробвам това и ще докладвам по-късно....Има ли добри сайтове за уроци по SVG, които бихте препоръчали да прочетете?....имайки предвид, че не знам абсолютно нищо? - person James B; 23.04.2012
comment
хей @mbostock, сега използвам твоя код за лакътя, но когато се комбинира с превключване (разгъване, свиване), той вече не работи (Диагоналът работи добре). Можете ли да обясните как мога да го накарам да работи? - person Phyo Arkar Lwin; 07.02.2013