gpt4 book ai didi

javascript - 如何在 d3 js 中突出显示从根到选定节点的路径?

转载 作者:行者123 更新时间:2023-11-29 15:28:01 25 4
gpt4 key购买 nike

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

最佳答案

首先做一个flatten函数,将层级数据变成一个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 .

关于javascript - 如何在 d3 js 中突出显示从根到选定节点的路径?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37361540/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com