d3.js更新不适用于嵌套数据+连接

Question

我的d3.js热图图表无法正确更新。

目标与解释

该图表包含嵌套在定期（每月/每年）数据中的密度数据。首先，它过滤年份，绘制月份，然后附加密度数据。由于无论年份如何，月份都保持相同的结构（1年= 12个月），因此在更改目标年份时，密度数据可以平稳地过渡到其他年份。

// data structure
[
  {
    key: "0" // represents month
    values: Array(19) [
      0: Object {korea: 1, date: 2016-01-03, world: 1} // density data with keys
      1: ...
    ]
  },
  {
    key: "1"
    ...
  }
]

通过selection.filter()在嵌套的.join()中进行过滤

问题

使用.join()的常规更新模式不适用于嵌套数据。相同的概念通​​常适用于任何平面数据（无嵌套）。

  const targetYear = 2017; // it can be changed to other years too..

  const childEnter = enter => enter.filter(d.data.getFullYear() === targetYear)
    .append('rect')
    // ...

  const chart = svg
    .data(data)
    .join(parentEnter, parentUpdate, parentExit)
    .data(d => d.values)
    .join(childEnter, childUpdate, childExit) // childUpdate does not work at all...
    .attr(/* this part works, but ignores .key or order of array. transition doesn't work. */)

实际代码

https://observablehq.com/@rabelais/year-month-trend-heatmap-of-overwatch