D3 SVG 개체와 관련된 DOM 요소에 액세스하는 방법은 무엇입니까?

D3 SVG 개체와 관련된 DOM 요소에 액세스하는 방법은 무엇입니까?

---

나는 그들의 기본 버블 차트 중 하나를 실험하여 D3를 배우려고 노력하고 있습니다. 첫 번째 작업 : 버블을 드래그하는 방법을 알아 내고 드래그하는 동안 맨 위에있는 개체가되도록합니다. (문제는 D3의 객체 모델을 DOM에 매핑하는 것이지만 거기에 도달 할 것입니다 ...)

드래그하려면 제공되는 코드를 사용하여 d3의 드래그 동작을 호출하면됩니다.

var drag = d3.behavior.drag()
    .on("dragstart", dragstart)
    .on("drag", dragmove)
    .on("dragend", dragend);

잘 작동합니다. 잘 끌립니다. 자, 어떻게 그것을 최상위 항목으로 만들까요? 여기에서 "svg z-index"를 검색하면 색인을 변경하는 유일한 방법은 DOM에서 개체를 더 아래로 이동하는 것임을 금방 알 수 있습니다. 확인. 개별 거품에는 ID가 없기 때문에 쉽게 만들 수 없지만 콘솔을 엉망으로 만들면 다음과 같이 거품 개체 중 하나를 찾을 수 있습니다.

$("text:contains('TimeScale')").parent()

다음을 사용하여 포함하는 svg 요소의 끝으로 이동할 수 있습니다.

.appendTo('svg')

그런 다음 드래그하면 최상위 항목이됩니다. 지금까지 완전히 DOM 내에서 작업하고 있다면 아주 좋습니다 .

하지만 내가 정말로하고 싶은 것은 주어진 객체 / 버블이 끌릴 때마다 자동으로 일어나는 것입니다. D3는 드래그 과정에서 원하는 작업을 수행하기 위해 문을 삽입 할 수 있는 모델 dragstart()및 dragend()함수를 제공합니다 . 그리고 D3는 현재 드래그하고있는 객체 / 버블 d3.select(this)에 대한 d3의 객체 표현에 액세스 할 수 있는 구문을 제공합니다 . 그러나 내가 상호 작용할 수있는 DOM 요소에 대한 참조로 반환되는 대용량 배열을 어떻게 깔끔하게 전환하고-예를 들어-svg 컨테이너의 끝으로 이동하거나 양식 제출과 같은 DOM에서 다른 참조를 수행 할 수 있습니다. ?

---

selection.node () 메소드 를 통해 선택으로 표시된 DOM 요소를 가져올 수도 있습니다.

var selection = d3.select(domElement);

// later via the selection you can retrieve the element with .node()
var elt = selection.node();

---

SVG 문서의 모든 DOM 요소에는 해당 문서가있는 SVG 문서 ownerSVGElement를 참조 하는 속성이 있습니다.

D3의 선택 항목은 추가 메서드가있는 중첩 된 배열입니다. 이 경우 .select()하나의 DOM 요소를 에드, 당신은 그것을 얻을 수 있습니다 [0][0]예를 들어 :

var foo = d3.select(someDOM);

// later, where you don't have someDOM but you do have foo
var someDom = foo[0][0];
var svgRoot = someDom.ownerSVGElement;

참고 그러나, 당신이 사용하는 경우 것이 d3.select(this)다음 this이미 것은 입니다 DOM 요소; 포장을 풀기 위해 D3 선택으로 포장 할 필요가 없습니다.

---

추가 할 때 원하는 경우 개별 요소에 ID와 클래스를 할당 할 수 있습니다.

node.append("circle.bubble")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return fill(d.packageName); })
.attr("id", function(d, i) { return ("idlabel_" + i)})
.attr("class", "bubble")
;

그런 다음 selectAll ( "circle.bubble")을 사용하여 클래스별로 선택하거나 ID별로 선택하고 다음과 같이 속성을 수정할 수 있습니다.

var testCircle = svg.select("#idlabel_3")
.style("stroke-width", 8);

참조 URL : https://stackoverflow.com/questions/10337640/how-to-access-the-dom-element-that-correlates-to-a-d3-svg-object