javascript - 根据元素的文本内容过滤

Question

我是 d3 的新手，我正在尝试调整 Mike Bostock 的 Treemap 示例 ( http://bl.ocks.org/mbostock/4063582 )。以下是我想要实现的目标:

1) 通过提交按钮接受用户的文本输入；

2) 找到包含文本输入的节点(从树中)；

3) 改变那些节点的背景属性。

为了简化我的问题，有没有办法根据元素的文本内容过滤(子集)元素？

例如，如果我有以下四个 p 元素，我可以像下面那样将名字 Cathy 更改为 red 吗？

d3.selectAll("p")
    .filter(function(d) { return d.text === Cathy; })
    .attr("color", "red");

<p>Alice</p>
<p>Ben</p>
<p>Cathy</p>
<p>Daniel</p>

如有任何意见，我们将不胜感激。

Answer 1

如果现有元素已经绑定(bind)了数据，包括用于设置文本的“文本”元素，您的示例代码将立即运行(除了引用字符串“Cathy”之外)。

如果没有，你只需要做一个小的修改 - 如果元素的实际文本内容没有存储在数据中，你会想要使用 this 来获取它:

d3.selectAll("p")
    .filter(function(d) { return d3.select(this).text() === "Cathy"; })
    .attr("color", "red");