D3 참조 인덱스에 의한 svg 요소

Question

인덱스를 기준으로 svg 요소를 참조 할 수 있습니까?

예를 들어 d3.selectAll("circle").on("click", function(d, i) { console.log(i) }을 입력 할 수 있습니다. 여기에서 i은 ith<circle>입니다.

그러나 인덱스가 i 인 경우 어떻게 참조 할 수 있습니까? ith<circle>?

어쨌든 과 같은 이름으로 전화하면 ith 개의 속성을 얻을 수 있습니까? 예를 들어 실제로 다섯 번째 원의 좌표를 알고 싶지 않으면이 경우 i = 5라고 말하십시오.

어떻게 이런 식으로 요소를 참조 할 수 있습니까? 이것은 가능한가? 핸들러

d3.selectAll("circle").on("click", function(d, i) { console.log(i) } 

당신이 this 키워드 (당신이 console.log(this)를 참조 할 수 있습니다)를 통해 클릭 된 <circle> 요소에 액세스 할 수에서

Answer 1

.

DOM 요소에

감안할 때 액세스, 당신은 지금 D3-선택할 수 있습니다

d3.selectAll("circle") 
    .on("click", function(d, i) { 
    d3.select(this).attr('fill', 'red'); 
    } 

또한, 당신이 DOM 노드를 갖고 있기 때문에, 당신은 또한 this.parentNode을 통해 부모를 얻을 수 있습니다, 당신은 하나를 선택할 수 있습니다 그 부모의 자녀들 (즉, 형제 자매)의 i을 기준으로 선택하려면 :nth-child을 사용할 수 있어야합니다.

d3.selectAll("circle") 
    .on("click", function(d, i) { 
    d3.select(this.parentNode).select('circle:nth-child' + (i+1)) 
    } 

또한 모든 형제 원을 선택하고 조건 적으로 자신의 인덱스를 기반으로 조작 할 수 있습니다

d3.selectAll("circle") 
    .on("click", function(d, i) { 
    d3.select(this.parentNode).selectAll('circle') 
     .attr('fill', function(dSibling, iSibling) { 
     if(iSibling != i) { 
      // Affects all sibling circles EXCEPT the clicked one 
      return 'red' 
     } 
     }) 
    }