Итак, мне очень нравится этот пример от Джейка Зиве, показанный здесь: https://bl.ocks.org/jjzieve/a743242f46321491a950
По сути, при поиске термина путь к этому узлу подсвечивается. Я хотел бы сделать что-то подобное, но со следующими оговорками:
- Я бы хотел остаться в D3 v4.
- Я обеспокоен случаями, когда путь не очищается при выборе следующего узла ИЛИ , что происходит, когда есть два одинаковых узла
имя (в идеале хотелось бы выделить все пути)
- Я бы хотел ИЗБЕГАТЬ, используя JQuery
Учитывая заданный поисковый термин (предположим, вы уже откуда-то получаете строку), я знаю, что мне нужно специально использовать следующие строки (вы можете видеть мой поток сознания в комментариях), но я просто не совершенно уверен, с чего начать.
// Returns array of link objects between nodes.
var links1 = root.descendants().slice(1); //slice to get rid of company.
console.log(links1); //okay, this one is nice because it gives a depth number, this describes the actual link info, including the value, which I am setting link width on.
var links2 = root.links(); // to get objects with source and target properties. From here, I can pull in the parent name from a selected target, then iterate again back up until I get to source. Problem: what if I have TWO of the same named nodes???
console.log(links2);
Мысли об этом? Я буду продолжать пытаться самостоятельно, но я продолжаю преодолевать контрольно-пропускные пункты. Мой код можно найти здесь: https://jsfiddle.net/KateJean/7o3suadx/
[ОБНОВЛЕНИЕ]
Мне удалось добавить фильтр к links2, чтобы перезвонить определенной записи. Увидеть
Например:
var searchTerm = "UX Designer"
var match = links2.filter(el => el.target.data.name === searchTerm); //full entry
console.log(match);
Эта единственная запись дает мне всю связанную информацию, включая полный список всех точек до "КОМПАНИИ"
Итак, я могу получить данные. Я думаю, что лучший способ выполнить то, что я хочу, это как-то добавить класс к каждому из этих элементов, а затем применить стиль к этому «активному» классу.
Спасибо!