如何在 d3.tree 代码中选择所有以指定单词结尾的 d.data.id？

Question

在收到my last question 的答复后，我可以以所需的方式修改 d3.tree 代码。

请假设我有以下flare.csv文件

A
A.A
A.A.B
A.A.C
A.B
A.B.C
A.C
A.C.D
A.D
A.D.A
A.D.B
A.D.D
A.E
A.E.A
A.E.B

但是，我遇到了另一个问题。要将颜色分配给某些特定节点，建议回答者添加

.style("fill", function(d){
   return !d.parent ? "blue" : d.data.id === "A.D.B" ? "red" : 
"black";
})

这基本上将父节点的颜色更改为蓝色，将“A.D.B”的颜色更改为红色。

现在您可能会看到，我在字母“B”中有几个 d.data.id 的结尾。例如，“A.D.B”、“A.E.B”和“A.A.B”。在 html javascript 代码中对所有这些节点执行相同操作的最简单方法是什么，即将它们的颜色更改为红色，即所有 IDS 都以字母“B”结尾。

在 linux 和 Matlab 中，可以使用“*B”来实现这一目标。由于我是 javascript 新手，我需要你的帮助来解决这个问题。 请注意，我正在处理大量的 d.data.id，因此在代码中指定所有这些非常耗时。因此，我正在寻找一种方便的方法。 谢谢。

Answer 1

如果要将以data 结尾的节点涂成红色，只需拆分字符串即可：

var array = d.data.id.split(".");

并检查最后一个元素。对于您假设的 CSV：

return !d.parent ? "blue" : array[array.length-1] === "B" ? "red" : "black";

这会将任何以 B 结尾的 ID 变为红色。

对于真正的块（关于您的预编辑问题）：

.style("fill", function(d){
    var array = d.data.id.split(".");
    return !d.parent ? "blue" : array[array.length-1] === "data" ? "red" : "black";
})

这里是更新的 bl.ocks：https://bl.ocks.org/anonymous/bb3ff95151d3252597d52c917489dda2

Answer 2

不是最佳答案，但您也可以...

将逻辑运算符添加到三元条件以包含其他索引。

.style("fill", function(d){
   return !d.parent ? "blue" : (d.data.id === "A.D.B" || d.data.id === "A.D.D") ? "red" : 
"black";
})