Javascript 如何基于动态更改文本操作节点？（输入/退出/更新）

我将d3.js与force布局一起使用。现在，借助动态变化的数组

数据

，可以根据数组动态高亮显示节点。同样，通过下面的代码，我能够以文本的形式动态显示作为数组一部分的节点的名称

因此，当数组具有例如3个条目时，将显示3个节点，并显示3个节点名称。假设他们的名字是“a”、“b”、“c”，那么文本“a”、“b”、“c”就会出现在屏幕上。 现在，当我单击新出现的文本“a”时，我希望包含该名称的节点以绿色填充。我用名为

specialfunction

的函数尝试了这一点。问题是，当我单击时，所有节点都填充为绿色 关于文本“a”。你们中有人能帮忙吗？谢谢

 var texts = svg.selectAll(".texts")
        .data(data);


    textsExit = texts.exit().remove();

    textsEnter = texts.enter()
        .append("text")
        .attr("class", "texts");

    textsUpdate = texts.merge(textsEnter)
        .attr("x", 10)
        .attr("y", (d, i) => i * 16)
        .text(d => d.name)
        .on("click", specialfunction);

  function specialfunction(d) { 


         node.style("fill", function(d){ return this.style.fill = 'green';});

             };

---

现在，您的

specialFunction

函数只接受

节点

选择，并将其所有元素的样式设置为返回值

this.style.fill = 'green';

。。。也就是说，猜猜看，

“绿色”

相反，

根据单击的文本过滤节点：

function specialFunction(d) {
    nodes.filter(function(e) {
        return e === d
    }).style("fill", "forestgreen")
}

在这个简单的演示中，
d
是文本和圆圈的数字。只需将我的演示中的
d
更改为
d.name
或您想要的任何其他属性。单击文本，相应的圆圈将改变颜色：


var svg=d3.选择（“svg”）；
var数据=d3.范围（5）；
var nodes=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cy”，50）
.attr（“cx”，功能（d）{
返回30+d*45
})
.attr（“r”，20）
.样式（“填充”、“浅蓝色”）
.attr（“笔划”、“灰色”）；
var text=svg.selectAll（空）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“y”，88）
.attr（“x”，函数（d）{
返回26+d*45
})
.attr（“填充”、“灰色”）
.attr（“光标”、“指针”）
.文本（功能（d）{
返回d
})
。打开（“单击”，特殊功能）；
函数特殊函数（d）{
节点。过滤器（函数（e）{
返回e==d
}).style（“填充”、“绿色”）
}

再次感谢，全能的杰拉尔多！在你的例子中，当我点击另一个数字时，圆圈保持绿色。当点击一个新的数字时，圆圈是否有可能恢复到原来的颜色？另外，对于什么是
selectAll（null）
good？为什么不把selectAll省略掉呢？为了理解
null
，请阅读这里的评论：关于将圆圈变成原来的颜色，S.O.这里有几种解决方案。如果你没有找到，请发布另一个问题。@GerardoFurtado
selectAll（null）
-告诉过你；-）