Простой способ сделать SVG-блок в React имеет градиент цвета, используя D3. js

Question

Я пытаюсь создать гистограмму в компоненте React, используя D3. js, но не могу найти простых инструкций для создания прямоугольника, который начинается с цвета solid на одном конце и исчезает в сторону другого конца.

Итак, с учетом простого прямоугольника 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'))

Как заставить блок исчезнуть с solid черного на серый?

Answer 1

Для этой цели вы можете использовать линейные градиенты с defs. Вот подробная статья для вашей справки. Графики D3 с градиентным цветом