jquery - Changing attribute of a DOM element using D3 data that is bound to it -

i have d3.js visualization of dag, using force-directed layout. want change colours of nodes. far, have done in click listeners using this:

function clicknode(node) {     d3.select(this).attr("fill", nodehighlightcolour); } 

however, want change node colour in function called listener, instead of listener itself. reason has separate function want "highlight" series of nodes, tracing node that's clicked, need call function (tracepath) recursively.

if call tracepath listener, "undefined function" runtime error when try d3.select(this).attr("fill"). i'm guessing because this no longer in scope. can pass node object tracepath, node data rather dom element. how dom element using data object bound it?

edit: wrote in comment felix kling, can't pass this tracepath. work first node, still have call function recursively. here tracepath function far:

// trace node - node_el "this", node node data function tracepath(node_el, node) {     var this_id = node.id;      if (node.logic == null) {             console.log("highlighting!");             // using "this" change colour             d3.select(node_el).attr("fill", nodehighlightcolour);     }     // edges point node     (var i=0; i<edges.length; i++) {             var e = edges[i];             if (e.target == this_id) {                     var next_node = none;                      // node @ source of edge                     (var j = 0; j<nodes.length; j++) {                         if (nodes[j].id == e.source) {                             next_node = nodes[j];                         }                     }                     // recursively trace node                     if (next_id != none) {                             // how dom element pass tracepath?                             tracepath(???, next_node);                     }             }     } } 

thanks felix kling answer this! suggested, added id each svg circle element same node data id, this:

 circle = d3.select('#graphics').append("g").selectall("circle")          .data(force.nodes())          .enter().append("svg:circle")          .attr("id", function(d) {               return d.id;          })          .on("click", clicknode) 

then, access dom element using node id. here finished tracepath function:

// trace path node function tracepath(node_el, node) {     var this_id = node.id;     console.log("in tracepath");     if (node.logic == null) {             console.log("highlighting!");             d3.select(node_el).attr("fill", nodehighlightcolour);     }     console.log("this_id:", this_id);     // edges point node     (var i=0; i<edges.length; i++) {             var e = edges[i];             if (e.target.id == this_id) {                     console.log("edge ", e.source.name);                      // recursively trace node                     var next_el = document.getelementbyid(e.source.id);                     tracepath(next_el, e.source);             }     } } 

i noticed e.target (where e edge) gives me target node itself, not id, didn't need search through nodes.