What does d3.select(this) return?

Question

I have an svg group upon which I call a drag function.

var container=d3.select("#id");
container.call(dragcontainer);
var dragcontainer = d3.drag()
                        .on("start", function () {})
                        .on("drag", function (d, i) {  
                            //(d3.select(this)).select("rect");
                        })
                        .on("end", function () {});

Apparently, d3.select(this) does not return the container, however they are similar (checked through attributes), but just not exactly the same.

Why does this happen? How can I access container within the called function?

Answer 1

Somewhat duplicative of the comments, but the reason is that d3.select returns a d3 selection. Each selection is a different object, even if you select the same DOM node. The following shows the difference:

var container = d3.select("body").node();

var sel1 = d3.select(container);
var sel2 = d3.select(container);

console.log(sel1 === sel2);               // false
console.log(sel1.node() === sel2.node()); // true