Uncaught TypeError: Cannot read property 'selectAll' of undefined - Heat Map - D3

I’m trying to make the legend for the Heat Map project but I get this error:

Uncaught TypeError: Cannot read property ‘selectAll’ of undefined

My code for the legend svg is similar to the conatiner one yet I get an error.
Here’s my code:

const legend = d3
        .select("body")
        .append("svg")
        .attr("height", 100)
        .attr("width", 940)
        .attr("id", "legend");
      legend.d3
        .selectAll("rect")
        .data(colors)
        .enter()
        .append("rect")
        .attr("x", (d, i) => 30 + 80*i)
        .attr("y", 10)
        .attr("width", 80)
        .attr("height", 80)
        .attr("fill", (d) => d);

Is it because I’m selecting all the rect elements including the ones of the heat map? Any help would be appreciated!

legend.d3.selectAll?

1 Like

Thanks a lot! These little error are so hard to spot!

For anyone seeing this in the future, the error is that the .d3 is not necessary in the line @SpaniardDev refers to.

1 Like