d3.js - 如何搜索节点并突出显示它

Question

首先非常感谢大家帮助我完成我的 d3 项目。

我正在尝试为 d3.js 创建的可视化开发搜索功能节点是圆圈，并且有一个类 .node 一个属性 code="12311", code="12312"...等等

我试图有一个场景，如果输入值与属性匹配，那么特定节点颜色将改变或某种类型的过滤器。

节点看起来像这样

<circle cx="12" cy="63" r="5" code="12311" style="fill:#12311"></circle>
<circle cx="24" cy="33" r="5" code="12312" style="fill:#12311"></circle>
<circle cx="32" cy="43" r="5" code="12313" style="fill:#12311"></circle>

这是我的搜索框 html

<input type="text" id="searchBox"><input type="button" id="search" value="search"/>

Answer 1

如果您的搜索始终是针对code属性的简单等价测试，则可以只使用属性选择器：

d3.selectAll("circle[code='12311']");