JSFiddle - React, Tailwind, and code Playground

by mathheadinclouds

HTML

<div id="Lysander" class="foo">Lysander</div>
<div id="Spooner" class="foo" style="color:red;">Spooner</div>
<br>
datum is undefined, because .data() was not called
<div id="data"></div>
<br>
result via filter
<div id="resultViaFilter"></div>
<br>
result via each / if
<div id="attQueryResult"></div>

JavaScript

dataElt = d3.select("#data");
resultViaFilterElt = d3.select("#resultViaFilter");
attQueryResultElt = d3.select("#attQueryResult");

// look at values of d and i passed to .each method
d3.selectAll(".foo").each(function(d,i){
    dataElt.append("span")
    .text("index: " +i+ " datum: " +d)
    .append("br");
});

//attribute retrieval with filter, as in accepted answer
var att = d3.selectAll(".foo").filter(function(d, i){
    return d3.select(this).attr("id") == "Spooner";
}).attr("style");
resultViaFilterElt.text(att);

// other method (wrong in accepted answer, here correct version)
d3.selectAll(".foo").each(function(d,i){
    var elt = d3.select(this);
    if (elt.attr("id") == "Spooner"){
        attQueryResultElt.text(elt.attr("style"));
    }

});