score:1

Accepted answer

First off, nice work, because you almost got it! I've forked your notebook to clarify, but essentially, you only traversed the DOM up a single level, and hadn't yet reached the higher level.

Here's the relevant snippet:

.text((d,i,n) => {

const yearNode = d3.select(n[i])
.node()
.parentNode
.parentNode

const selectedYear = d3.select(yearNode)
.data()[0]
.Year

console.log(selectedYear);

        d.key + ": " + d.value
      });

As you can see, the above code moves up two parent nodes, first to the rect element and then to the g element.

Next, we select this node using d3, access its data attributes using the .data() method, and get the year value using the Year key.


Related Query