노드를 검색하고 강조 표시하는 방법

Question

우선 d3 프로젝트를 통해 많은 도움을 주신 모든 분들께 감사드립니다.

d3.js로 만든 시각화를위한 검색 기능을 개발하려고합니다. 노드는 원이며 클래스 .node는 속성 코드 = "12311", 코드 = "12312"... 등이 있습니다.

입력 값이 속성과 일치하고 perticular 노드 색상이 변경되거나 일부 필터 유형이있는 시나리오를 만들려고합니다.

노드 내 검색 상자에 HTML 여기

<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> 

처럼되어 보이는

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

Answer 1

검색은 항상 code 속성에 대한 간단한 동등성 시험의 경우, 당신은 단지 속성 선택기를 사용할 수 있습니다 :

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