D3.js v5.0 主题河流

emmm其实写到这里的话也差不多写完了基本的图形实现。因为先接触的v3.0+版的D3，现在是v5.0+的，写法上差别比较大，加上全是英文的API真的是硬伤。但是实现思路还是差不多的。有写错的请指正。有写的不好的地方请忽略。
对于这个主题河流图，应该这么叫？
我最开始的想法
是和堆栈图联系起来的，想法是使用区域转换器d3.area()
但是报错了，脑子糊了没找出来原因，所以放弃了。
所以有大佬写出来的话，希望可以指导一下。

老规矩，先看图。

import * as d3 from 'd3';

export default function stackRect(id) {
   
  (() => {
   
    d3.select(id)
      .selectAll('svg')
      .remove();
  })();
  const height = 800;
  const width = 800;
  const padding = {
   
    left: 100,
    right: 100,
    top: 100,
    bottom: 100,
  };

  const axisHeight = height - padding.top - padding.bottom;
  const axisWidth = width - padding.left - padding.right;
  const z = d3.interpolateCool;

  // 画布
  const svg = d3
    .select(id)
    .append('svg')
    .attr('width', width