如果自变量上的语句不会更新D3.js SVG组件

发布于 2025-01-30 01:42:45 字数 865 浏览 2 评论 0原文

我在某些数据上有一个散点图图表：

  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;
      }
    });

我将过滤器字符串作为道具传递，并且可以正确更新。但是，D3.js不会改变其不透明度。因此，Console.log将输出一个不等于UMAP的字符串。但是if语句像条件是正确的一样进入。

有人可以指出为什么吗？这是我不正确理解的某些打字稿/JavaScript吗？

所有这些都被称为反应钩。

预先感谢！我仍然是初学者。

原文

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.

分享到QQ

分享到微博