How to access the DOM element that correlates to a D3 SVG object?

Question

I'm trying to learn D3 by experimenting with one of their basic bubblecharts. First task: figure out how to drag an bubble and have it become the topmost object while it's being dragged. (The problem is getting D3's object model to map onto the DOM, but I'll get there...)

To drag it, we can simply invoke d3's drag behavior using the code they provide:

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

Works great. Drags well. Now, how do we get it to be the topmost item? Search for "svg z-index" here and it becomes quickly apparent that the only way to change the index is to move an object further down in the DOM. OK. They don't make it easy because the individual bubbles don't have ID's, but messing around with the console, we can locate one of those bubble objects with:

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

and we can move it to the end of the containing svg element with:

.appendTo('svg')

Drag it after you do that, and it's the top-most item. So far, so good, if you're working entirely within the DOM.

BUT: what I really want to do is have that happen automatically whenever a given object/bubble is being dragged. D3 provides a model for dragstart() and dragend() functions that will allow us to embed a statement to do what we want during the dragging process. And D3 provides the d3.select(this) syntax that allows us to access d3's object representation of the object/bubble you're currently dragging. But how do I cleanly turn that massive array they return into a reference to a DOM element that I can interact with and - for instance - move it to the end of the svg container, or perform other references in the DOM, such as form submission?

Answer 1

You can also get at the DOM element represented by a selection via selection.node() method

var selection = d3.select(domElement);

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

Answer 2

Any DOM element in an SVG document will have an ownerSVGElement property that references the SVG document it is in.

D3's selections are just nested arrays with extra methods on them; if you have .select()ed a single DOM element, you can get it with [0][0], for example:

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;

Note, however, that if you are using d3.select(this) then this already is the DOM element; you don't need to wrap it in an D3 selection just to unwrap it.

Answer 3

You can assign IDs and classes to the individual elements if you want when you append:

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")
;

And then you can select by class with selectAll("circle.bubble") or select by id and modify attributes like so:

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