D3区域图与React Hook

Question

我用React Hooks开发了一个D3区域图表。我需要使用不同的数据和渐变颜色相同的图表组件。同一页应该显示这两个图表。组件更改数据，但不更改颜色。有人能帮我解决这个问题吗?谢谢!

可以使用以下链接下载编码文件:

https://gist.github.com/chularansi/42bbab4820a0545d92bc55983228b634

可以看到两个数据不同但颜色相同的图表

Answer 1

问题是两个渐变都有相同的id"#gradient"，所以两个图表都在修改和使用相同的<linearGradient/>元素。

一个修复是在react组件中有一个id，并将其附加到<linearGradient/>id:

const Individuals = ({
width,
data,
header,
color1,
id = Math.random().toString()
}) => { 
...
svg
.append("linearGradient")
.attr("id", "gradient-"+id)
...
}

现在，每个组件都有自己的梯度。然后，将fill属性从CSS移动到D3，以访问id:

svg
.selectAll(".area")
.data([data]).join("path")
.attr("class", "area")
.attr("d", myArea)
.attr('fill', `url(#gradient-${id})`)