使用 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