0xD34F

Вместо .text((d, i) => { ... пусть будет

.each((d, i, a) => {
  const el = d3.select(a[i]);
  const max = this.lineData[i];
  let value = 0;

  const intervalId = setInterval(() => {
    if (++value == max) {
      clearInterval(intervalId);
    }

    el.text(value);
  }, 500 / max);
});

const Gradient = ({ data, areaGenerator, height }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      d3.select(ref.current)
        .append('linearGradient')
        .attr('id', 'area-gradient')
        .attr('gradientUnits', 'userSpaceOnUse')
        .attr('x1', 0)
        .attr('y1', 0)
        .attr('x2', 0)
        .attr('y2', height)
        .selectAll('stop')
        .data([
          { offset: '0%', color: 'rgba(101, 60, 173, 0)' },
          { offset: '100%', color: 'rgba(101, 60, 173, 0.2)' }
        ])
        .enter()
        .append('stop')
        .attr('offset', d => d.offset)
        .attr('stop-color', d => d.color);

      d3.select(ref.current).append('path').attr('class', 'area');
    }
  }, [ ref.current ]);

  useEffect(() => {
    if (ref.current) {
      d3.select(ref.current)
        .select('.area')
        .datum(data)
        .transition()
        .duration(1000)
        .attr('d', areaGenerator);
    }
  }, [ ref.current, data ]);

  return <g className="gradient-generator" ref={ref} />;
};

Косяк не с "работать", а с данными - не у всех объектов есть value, отфильтруйте их.

https://jsfiddle.net/gqa2wrkp/

Всё выводится правильно. То, что отметка 2015 отсутствует - ну так ваши данные начинаются после начала этого года. Хотите её увидеть - можно в качестве начала интервала брать дату из конца предыдущего года, например:

x.domain([
  d3.min(data, d => new Date(d.date)).setMonth(-1),
  d3.max(data, d => new Date(d.date)),
]);

вот так

Уберите yScale.domain(d3.extent(data, (d) => d.amount)) - так вы повторно задаёте интервал значений, беря в качестве границ минимум (был 0, остался 0) и максимум (вместо ранее установленных 100000 стало 50000, поэтому и "линия достигает самого верха графика") своих данных.

Что значит "как axisTop"? Разница между axisBottom и axisTop не в месте, где они отрисовываются, а в расположении подписей - снизу или сверху от оси. Хотите, чтобы ось располагалась внизу - сдвиньте её с помощью transform.

https://jsfiddle.net/1cz02wad/

Укажите tickFormat для xAxis:

.tickFormat(d3.timeFormat('%d %B'))

UPD. Дату надо указывать в миллисекундах, домножьте свои значения на 1000.

А как должно быть корректно? Просто забыли об этом рассказать, или решили что отвечающим догадаться труда не составит? Предположу, что вы стремились к чему-то вроде этого.

const data = [
  { title: 'a', value:   0 },
  { title: 'b', value: 100 },
  { title: 'c', value: 200 },
];

d3.select('#svg')
  .selectAll('g')
  .data(data)
  .enter()
  .append('g')
  .append('rect')
  .attr('x', d => d.value)
  .attr('y', d => d.value)
  .attr('width', 50)
  .attr('height', 50)
  .attr('fill', '#F0A');

Надо указать пространство имён, к которому относится добавляемый элемент.

Т.е., вместо append('div') должно быть append('xhtml:div').

Если захотите добавить внутрь div'а ещё что-то - указывать пространство имён уже не нужно, по умолчанию оно наследуется от родительского элемента.

Так?

Свойство lines в настройках сетки, отдельно для каждой из осей.