Javascript 如何在D3JS中突出显示从根节点到所选节点的路径？

我已经用D3JS创建了一个树。现在，我创建了一个下拉菜单，其中包含树中所有节点的列表。现在从下拉菜单中选择一个节点，我想突出显示从根节点到该特定节点的路径。如何做到这一点？

首先制作一个展平函数，该函数将分层数据放入一个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"
          }
        })

在更新函数中，根据数据（在选择函数中设置）为路径上色，如下所示：

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"
          }
        })

---

工作代码。

如果从下拉菜单中选择了一个折叠的节点……路径在内部高亮显示，但完整路径也应展开，单击“重置”按钮，树应重置为原始路径…………总之，非常感谢您的帮助：）见您提出的问题。我回答了。你扩大了范围。我还是回答了。你只是不能让我为你做一个项目LOL。。。问完全清楚的问题，不要扩大范围。如果有人回答，接受它。如果您有新问题，请在SO中提出一个新问题。好的，西里尔，非常感谢……实际上我并没有扩大范围，这是我最初想要的，这是非常合乎逻辑的……接受您的答案：）……非常感谢……如果您能进一步帮助我，那将非常好……以下是d4 v4中不再支持的新问题对角线（）/