Дерево/дендрограмма с коленчатыми соединителями в 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 собственным генератором пути, используя символы SVG "H" и "V" команды пути.

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