我正在试验和修改 this基于 JSON 树结构绘制树的 d3.js 示例。这就是树的开始部分:
我正在尝试进行 2 次单独的修改,但我不知道该怎么做:
- 单击节点的文本时,我想获取所有树后代的文本元素的集合。我想这样做,以便我可以在
my-old-class
和my-new-class
之间切换它们的样式类。 - 单击节点的文本时,我想获取所有树祖先的文本元素的集合。我想这样做,以便我可以在
my-old-class
和my-new-class
之间切换它们的样式类。
我该怎么做?
除了我需要在 nodeEnter.append("text")
语句中添加点击功能外,我根本不知道如何做#1。但是该功能应该做什么?
对于 #2,我知道这是我需要修改的代码的相关部分。像这样:
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6)
.on("click", function(d) {
for (var currentAncestor = this.parentNode; /* WHAT EXPRESSION GOES HERE?? */; currentAncestor = currentAncestor.parentNode) {
var ancestorText = /* WHAT EXPRESSION GOES HERE?? */;
ancestorText.classed("my-new-class", !ancestorText.classed("my-new-class"));
ancestorText.classed("my-old-class", !ancestorText.classed("my-old-class"));
});
但我不确定用什么来代替这两个表达式,以便我可以正确地遍历树的祖先(不是 DOM 祖先!!)的文本元素仅
编辑:
例如,在下面的屏幕截图中,当用户单击文本“data”时,我想要它的祖先文本(“vis”和“flare”)及其后代文本(出现在“数据”变为红色)
最佳答案
每个节点都应该有一个这样的父节点:
function collapse(d) {
if (d.children) {
d.children.forEach(function(child){
child.parent = d;//so now each node will have a parent except root node.
});
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
接下来是设置颜色的函数。 此函数将遍历给定节点并将其子节点设置为具有颜色字段。
function setColor(d, color) {
d.color= color;
if (d.children) {
d.children.forEach(function(d){setColor(d,color)});
} else if(d._children){
d._children.forEach(function(d){setColor(d,color)});
}
}
点击文本调用此函数:
function textClick(d) {
setColor(root, "black");//set all the nodes to have black.
d1 = d;
//iterate over all its parent and make it red
while(d1){
d1.color = "red";
d1 = d1.parent;
}
//set color of the children node to red.
setColor(d, "red")
update(root);//call update so that the node text color is colored accordingly.
}
工作代码here
关于javascript - 如何从这个 d3.js layout.tree 中获取树祖先和树后代的列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37292914/