If statement on independent variable does not update d3.js svg components

Question

I have a scatter chart on some data that I define like this:

  svg.append('g')
    .attr('transform', `translate(${margin.left},0)`)
    .call(yAxis);

  g
    .selectAll('.scatter')
    .data(data)
    .join('circle')
    .attr('class', 'scatter')
    .attr('cx', (d) => xScale(d.x))
    .attr('cy', (d) => yScale(d.y))
    .attr('r', 3)
    .attr('stroke', 'gray')
    .attr('stroke-width', 0.5)
    .style('fill', (d) => colorScale(d.label as number))
    .style('fill-opacity', (d) => {
      // Get data value
        console.log("Filter is {}", filter);
      if (filter === 'umap') {
        return 0.2;
      }
      else
      {
          return 0.8;
      }
    });

I pass the filter string as a prop, and it gets updated correctly. However, d3.js does not change its opacity. So console.log would output a string not equal to umap. But the if statement enters as if the condition is true.

Can someone point out to why? Is this some typescript/javascript I do not understand correctly?

All of this is called inside a react-hook.

Thanks a lot in advance! I am still a beginner.

Answer 1

So the answer to this problem was that I had the react-hook only relying on the data variable. Changing this also to take effects on the filter variable worked.