d3 jsでルートから選択されたノードへのパスをハイライトする方法は？

Question

私はd3 jsを使ってツリーを作成しました。今私は、ツリー内のすべてのノードのリストを含むドロップダウンメニューを作成しました。ドロップダウンメニューからノードを選択すると、ルートからその特定のノードまでのパスをハイライトしたいと思います。これを行う方法？

Answer 1

まず、階層データをn配列にするflatten関数を作成します。選択ボックスで

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。