How do I find the associated DOM element when I have the Data object in D3?

Question

I have about 20-30 "rect" objects, that are contained in the group with class "barsGroup", in my D3 that each have associated Objects bound to them. The bound objects have an id field that is a UUID.

Can anyone help me with the select statement to find the associated "rect" DOM element when i only have the Object. All of my bound objects are in the "data" array;

I have tried

d3.select("#barsGroup").selectAll("rect").data(data).filter(function(d){return task.id === d.id})[0][0];

and while that seems to work for most elements, it messes up on others. Can someone shed some light on what I'm doing wrong?

My approach may very well be wrong.

Essentially I have an object that looks kinda like this:

{"id":"c",
 "parents":["a","b"]
}

Each a,b, and c data objects have been bound to rectangles.

I am now attempting to draw arrows from the bounding box of the rectangle bound to "c", to rectangles bound to parents "a" and "b".

I'm looking for how to use the id from the object "a" to acquire the DOM rectangle that is bound by the object "a".

Answer 1

如果您需要节点，无需修改API，请使用node方法...

var myRect = d3.select("#barsGroup").selectAll("rect").filter(function(d){return task.id === d.id}).node();

Answer 2

I removed the data binding. And it worked like a charm. "task" is the object.

d3.select("#barsGroup").selectAll("rect").filter(function(d){return task.id === d.id})[0][0];