Свернуть / развернуть дочерние узлы дерева в d3.js?

Question

Я строю древовидную структуру (или, вернее, изменяю один из примеров набором своих данных в моем собственном json) и пытаюсь создать некоторые функциональные возможности:

Макет моего дереваэто из примера дерева: http://mbostock.github.com/d3/ex/cluster.html

Я добавляю (к кружкам) событие onclick, которое я хотел бы свернуть дочерние элементы узла, по которому щелкнули.То есть, когда пользователь щелкает стальной стальной круг, связанный с узлом, я хочу, чтобы дочерние узлы исчезли.

Я просмотрел документацию и не нашел ничего, что позволило бы мнезаставить узлы разрушаться или исчезать.

Что я мог сделать?

Answer 1

Вот это:

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

Существует ряд других примеров интерактивного иерархического макета из моего SVG Open keynote .

Answer 2

Есть пара подходов, один из них - использовать обычные слежки, чтобы скрыть разметку дочерних элементов (непрозрачность: 0 или отображение: нет).Однако это просто делает данные невидимыми, дерево сохраняет свою форму, как будто данные там, вы просто не можете их видеть.

Обычно вы хотите, чтобы дерево притворялось, что данных там нети обновите соответствующим образом, для этого вы можете использовать тот же подход, что и в примере силового макета в приведенной выше ссылке.

Это сводится к следующему: 1) Используйте функцию для построения дерева d3 2) добавьте щелчоксобытие для складных узлов 3) событие click переименовывает свойство children узла и вызывает функцию в 1), которая перерисовывает дерево без дочерних узлов этого узла.

Вот соответствующий код по ссылке в ответе nkoren (http://bl.ocks.org/1062288):

function update() { 
    // build the tree layout here
    //  append on("click", click) to the collapsible nodes
}

// Toggle children on click
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}

Answer 3

К сожалению, я до сих пор набираю скорость с D3, и я не уверен, как лучше всего ответить на ваш вопрос. Но вот макет с принудительным указанием, который позволяет вам показывать / скрывать узлы, нажимая на них, что может дать вам несколько идей: http://bl.ocks.org/1062288