d3로 원을 앞으로 가져 오려면 어떻게해야합니까?

d3로 원을 앞으로 가져 오려면 어떻게해야합니까?

---

우선 d3.js를 사용하여 배열에 다른 크기의 원을 표시합니다. 마우스를 올리면 원이 더 커지기를 원합니다. 할 수 있지만 어떻게 앞으로 가져 가야할지 모르겠습니다. 현재 렌더링되면 다른 여러 원 뒤에 숨겨집니다. 이 문제를 어떻게 해결할 수 있습니까?

다음은 코드 샘플입니다.

   .on("mouseover", function() { 
    d3.select(this).attr("r", function(d) { return 100; })
  })

정렬 및 순서 방법을 사용해 보았지만 작동하지 않았습니다. 내가 제대로하지 않았다고 확신합니다. 이견있는 사람?

---

개체의 순서를 변경하고 마우스를 올려 놓은 원을 마지막으로 추가 한 요소로 만들어야합니다. https://gist.github.com/3922684에서 볼 수 있듯이 nautat 에서 제안한 대로 기본 스크립트 앞에 다음을 정의해야합니다.

d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};

그런 다음 마우스 오버시 moveToFront개체 (예 circles:) 에서 함수 를 호출 해야합니다 .

circles.on("mouseover",function(){
  var sel = d3.select(this);
  sel.moveToFront();
});

편집 : Henrik Nordberg가 제안한대로 .NET Framework 의 두 번째 인수를 사용하여 데이터를 DOM에 바인딩해야합니다 .data(). 이것은 요소에 대한 바인딩을 잃지 않기 위해 필요합니다. 자세한 내용은 Henrick의 답변을 읽고 찬성하십시오! 일반적인 조언으로, .data()d3의 전체 성능 기능을 활용하기 위해 데이터를 DOM에 바인딩 할 때 항상 두 번째 인수를 사용하십시오 .

---

편집 : Clemens Tolboom이 언급했듯이 역 기능은 다음과 같습니다.

d3.selection.prototype.moveToBack = function() {
    return this.each(function() {
        var firstChild = this.parentNode.firstChild;
        if (firstChild) {
            this.parentNode.insertBefore(this, firstChild);
        }
    });
};

---

moveToFront()메서드 를 사용하는 경우 data()조인 메서드에 두 번째 인수를 지정해야합니다. 그렇지 않으면 데이터가 DOM과 동기화되지 않습니다.

d3.js는 사용자 parse()가 만든 DOM 요소와 데이터 (에 제공됨 ) 메서드 를 결합합니다 . 위에서 제안한대로 DOM을 조작하는 경우 API 참조에 표시된 data()대로 호출 에서 각 데이터 '포인트'에 대해 고유 한 값을 지정하지 않는 한 d3.js는 어떤 DOM 요소가 어떤 데이터 '포인트'에 해당하는지 알 수 없습니다 .

.data(data, function(d) { return d.name; })

---

d3 버전 4부터는 직접 구현할 필요없이 이러한 유형의 동작을 처리하는 내장 함수 세트가 있습니다. 자세한 내용은 d3v4 설명서 를 참조하십시오.

간단히 말해서 요소를 앞으로 가져 오려면 selection.raise()

selection.raise ()

선택한 각 요소를 부모의 마지막 자식으로 순서대로 다시 삽입합니다. 다음과 동일 :

selection.each(function() {
this.parentNode.appendChild(this);
});

---

IE9에 대한 나의 고통스러운 경험에서 parentNode.appendChild를 사용하면 노드에서 이벤트 핸들러가 손실 될 수 있습니다. 그래서 저는 다른 접근 방식을 사용하는 경향이 있습니다. 즉, 선택한 노드가 다른 노드보다 위에 있도록 노드를 정렬하는 것입니다.

     .on("mouseover", function(selected) {
        vis.selectAll('.node')
        .sort(function(a, b) {
          if (a.id === selected.id) {
            return 1;
          } else {
            if (b.id === selected.id) {
              return -1;
            } else {
              return 0;
            }
          }
        });
      })

참고 URL : https://stackoverflow.com/questions/14167863/how-can-i-bring-a-circle-to-the-front-with-d3