Как выделить путь от корня к выбранному узлу в d3 js?

Question

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

Answer 1

Сначала сделайте функцию сглаживания, которая сделает иерархические данные в n массиве.

function flatten(root) { 
    var nodes = [], 
    i = 0; 

    function recurse(node) { 
    if (node.children) node.children.forEach(recurse); 
    if (node._children) node._children.forEach(recurse); 
    if (!node.id) node.id = ++i; 
    nodes.push(node); 
    } 

    recurse(root); 
    return nodes; 
} 

В окне выбора добавить изменения слушателя, как это:

var select = d3.select("body") 
     .append("select") 
     .on("change", function() { 
    //get the value of the select 
    var select = d3.select("select").node().value; 
    //find selected data from flattened root record 
    var find = flatten(root).find(function(d) { 
     if (d.name == select) 
     return true; 
    }); 
    //reset all the data to have color undefined. 
    flatten(root).forEach(function(d) { 
     d.color = undefined; 
    }) 
    //iterate over the selected node and set color as red. 
    //till it reaches it reaches the root 
    while (find.parent) { 
     find.color = "red"; 
     find = find.parent; 
    } 
    update(find);//call update to reflect the color change 
     }); 

Внутри вашей функции обновления цвета путь по данным (набор в функции выбора), как это:

d3.selectAll("path").style("stroke", function(d) { 
      if (d.target.color) { 
      return d.target.color;//if the value is set 
      } else { 
      return "gray" 
      } 
     }) 

Рабочий код here.