Как подходить к фильтрации узлов и ребер, отображаемых с помощью d3.js, в соответствии с предпочтениями пользователя?

Ссылка на мой код (Plunker)

Я разрабатываю схему сети в силовом макете D3.js для академических целей. Я до сих пор кодировал график, который отображает узлы и ребра. У меня есть автозаполнение текстового поля в jquery, где пользователь может ввести имя узла.

D3.js (только часть кода. Полный код см. В моей ссылке на плункер):

var force = d3.layout.force()
  .nodes(d3.values(nodes))
  .links(links)
  .size([width, height])
  .linkDistance(100)
  .charge(-1546)
  .on("tick", tick)
  .start();

var svg = d3.select("#schemio")
  .append('svg')
  .attr("width", width)
  .attr("height", height);

var link = svg.selectAll(".link")
  .data(force.links())
  .enter().append("line")
  .attr("class", "link");

var node = svg.selectAll(".node")
  .data(force.nodes())
  .enter().append("g")
  .attr("class", "node")
  .call(force.drag);

HTML:

<div class="ui-widget">
    <label for="tags">Filter: </label>
    <input id="tags">
</div>

Jquery (автозаполнение)

$(function() {
    $( "#tags" ).autocomplete({
      source: nodesArray
    });
});

Мне нужна функциональность, при которой, когда пользователь вводит имя узла в поле фильтра, мне нужно удалить все другие узлы и ребра в графе и сохранить только этот конкретный узел и его непосредственно связанные узлы и ребра (один переход).

Пример:

Когда я набираю «Parent» в поле фильтра, он должен удалить все другие узлы и ребра и оставить только «Parent» узел и его прямые дочерние узлы (child1, child2, child3).

Каков жизнеспособный подход для фильтрации узлов и ребер, когда пользователь ищет определенные термины?

Заранее спасибо.

 rmoestl06 июн. 2016 г., 07:29
Не знаю точно, в чем конкретный вопрос. Где вы застряли с вашим кодом правильно знать?
 rmoestl06 июн. 2016 г., 08:14
Спасибо за удаление кода наведения курсора мыши. Облегчает понять, в чем вопрос / проблема. Надеюсь, мой вопрос поможет вам. Я предлагаю взглянуть на пример, на который я ссылаюсь в своем ответе. Удачи.
 william cage06 июн. 2016 г., 07:54
На самом деле! Я новичок в D3.js и экспериментирую с этой сетевой диаграммой. Я хотел бы знать, что будет лучшим подходом, если мне понадобится функциональность, которую я описал в своем вопросе. Я видел много примеров, каждый из которых был реализован по-своему. Пример этогоиграть на скрипке использует функцию фильтра, тогда как я видел еще один пример, где они вручную анализируют все узлы на графике и выполняют функцию выделения.
 william cage06 июн. 2016 г., 08:06
Конечно! Благодарю. Кроме того, я удалил свой код события mouse-over и mouse-out, поскольку он не имеет отношения к заданному мной вопросу.
 rmoestl06 июн. 2016 г., 08:00
Хорошо спасибо. Я отредактировал ваш вопрос так, чтобы его намерение стало более ясным. Это стоящий вопрос, поэтому я пытаюсь на него ответить.

Ответы на вопрос(1)

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

ПодходВо-первых, вам нужно сузить исходные данные с помощью фильтрации или того, что имеет смысл в вашей ситуации. Вы в конечном итогеотфильтрованные данные.Тогда вам нужноselectAll узлы, которые уже были нарисованы иприсоединиться selection сотфильтрованные данные с шага 1.Наконец, используйте D3enter, update а такжеexit выбор для добавления, обновления иУдалить узлы и ссылки.

Майк Босток опубликовал [Изменение схемы раскладов]. (https://bl.ocks.org/mbostock/1095795)

Ваш ответ на вопрос