특정 데이터 기준과 일치하는 모든 점을 강조 표시하는 D3 scatterchart

Question

분산 된 점의 ID와 일치하는 모든 점을 강조 표시하려고합니다. 지금까지이 기능을 가지고 있지만 모든 점을 강조 표시합니다 (또는 지금은 검정색으로 바꿉니다.). 실제로 동일한 ID를 공유하는 항목 만 강조 표시해야합니다. d에 parentNode()를 사용하여 데이터뿐만 아니라 실제 점을 얻고 새로운 점 배열을 만들고 그 방법으로 강조 할 수 있습니까? 어쩌면 나는 훨씬 더 직선적 인 해결책을 놓치고있는 것처럼 느껴질 것입니다.

 dots.on('mouseover', function(d) { 
      let dotId = ''; 
      let dot = d3.select(this) 
      .datum(function(x) { 
       dotId = x.playerId; 
       console.log(dotId); 
       return this.dataset; }); 

      dots.each(function(d){ 
       console.log(d.playerId); 
       if (d.playerId === dotId) { 
        dots.style('stroke', 'black'); 
       } 
      }); 
     }); 

     dots.on('mouseout', function(d) { 
      //remove stuff 
     }); 
    } 

Answer 1

내가 제대로 질문을 이해하고있는 경우,이 같은이 trick-

dots.on('mouseover', function(d) { 
    var dotId = d.playerId; 

    var matches = dots.filter(function(d) { 
    return d.playerId === dotId; 
    }) 
    .style('stroke', 'black'); 

}); 

을해야 오히려 요소의 또 다른 배열을 구축하는 것보다 당신은 dots를 필터링하고 원래의 선택의 스타일을 수정할 수 있습니다 .