Как сделать d3.layout.tree таким образом, чтобы он распространялся вниз (корень вверху)

Question

Я нашел фантастическое дерево, как показано ниже, которое почти соответствует моим потребностям.Тем не менее, я хотел бы расширить по длине дерева.Может ли кто-нибудь дать мне какие-либо идеи, как сделать это или какие-либо ссылки на сайты.Любая помощь будет оценена.

http://mbostock.github.com/d3/talk/20111018/tree.html

Answer 1

В общем, вращение - это простой математический процесс.

Если исходные координаты точки {x,y}:

{-y,x} = rotated 90° (anti-clockwise)
{y,-x} = rotated -90° (clockwise)
{-x,y} = mirrored along y-axis
{x,-y} = mirroded along x-axis
{-x,-y} = mirroded along both

Эти переключения должны выполняться во всех вычислениях пути и координат. Я думаю, что это вполне работа.

Можно ли включить весь шаблон в один DIV? Тогда вы можете попробовать повернуть DIV с помощью CSS3-преобразования.

Answer 2

Пример дерева, на которое вы смотрите, фактически повернут по умолчанию, так что оно осталось слева направо.Вот почему во всех операторах 'translate' координаты x и y меняются с того места, где они обычно находятся.

Чтобы вернуть этот пример в ориентацию сверху вниз, выполните следующие две вещи:

1) Для узлов: поменяйте местами координаты x и y в каждом из операторов перевода:

.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })

должно быть изменено на

.attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })

и то же самое для всех остальных "translate"s.

2) Для ссылок: уберите метод .projection из

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

, чтобы он просто сказал

var diagonal = d3.svg.diagonal();