1

I'm trying to change a clicked circle's fill to black in D3.js v5. This is what I have

svg.selectAll(".token")
        .data(places)
        .enter()
        .append("circle")
        .attr("r", place_radius - 5)
        .attr("cx", (d) => d.x)
        .attr("cy", (d) => d.y)
        .attr("class", "token")
        .on("click", (d) => {
            d3.select(this)
                .attr("fill", "black")
        });

I'm getting the error this.setAttribute is not a function. I know the clicking is working correctly because I am able to console.log the data value.

Georgia S
  • 602
  • 4
  • 14
  • 2
    Arrow functions don't have the same `this` context as `function()` - with `function()` `this` is the element. So you could use either `function()` or you could use the second and third parameters of the passed function: `function(d,i,j) { d3.select(j[i])...` as the the third parameter is the collection of elements and the second parameter is the index of the clicked element. – Andrew Reid Oct 19 '19 at 17:40
  • Changing to function() worked like a charm, thanks a lot. – Georgia S Oct 19 '19 at 17:44

0 Answers0