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

Question

I,m trying to create a bar chart in a React component using D3.js, but can't seem to find simple instructions to create a rectangle that starts with a solid color at one end and fades away towards the other end.

So given a simple 30 x 300 rect:

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'))

How do I make the block fade from solid black to grey?

Answer 1

You can use liner gradients with defs for that purpose. here is the detailed article for your reference. D3 Charts with Gradient Color