使用D3.js在React中使SVG块具有颜色渐变的简单方法

Question

我正在尝试使用D3.js在React组件中创建条形图，但似乎找不到简单的说明来创建矩形，该矩形的一端以纯色开头，而另一端逐渐消失。

因此得到一个简单的30 x 300矩形：

const bar = () => {
  const b = select('svg')
    .append('rect')
    .attr('width', 300)
    .attr('height', 30)
}

const App = () => {
  useEffect(() => {
    bar()
  })
    return (
      <div>
        <svg width={200} height={200}>

        </svg>
      </div>
    )
}

render(<App />, document.getElementById('root'))

如何使图块从纯黑变为灰色？

Answer 1

为此，您可以将线性渐变与defs一起使用。这是详细的文章供您参考。D3 Charts with Gradient Color