如何在源数据更改时更新折线图点

Question

我从以下源数据创建了一个多线图表。

[   
    {
      "key":"108",
      "title":"Series 1",
      "items":[
        {
          "key":"54048872e9c2021fd8231051",
          "value":1.0
        },
        {
          "key":"540488a1e9c2021fd823107b",
          "value":2.0
        }
      ]
    },
    {
      "key":"15",
      "title":"Series 2",
      "items":[
        {
          "key":"54048872e9c2021fd8231051",
          "value":1.0
        },
        {
          "key":"540488a1e9c2021fd823107b",
          "value":4.0
        }
      ]
    }
]

我们为每个数据“点”

为每个Series和圆圈渲染一行

    var series = svg.selectAll('.series')
        .data(this.data)
        .enter()
            .append('g')
            .attr('class', 'series');

    series.append('path')
        .attr('class', 'line');

    // add points to chart
    var points = series.append('g')
        .attr('class', 'point')
        .selectAll('circle')
        .data(function (d) {
            return d.items;
        })
        .enter()
        .append('circle')
        .attr('r', 5);

然后，当我们第一次渲染图表或窗口调整大小时，我们实际设置了直线和圆的坐标：

    this.svg.selectAll('.line')
        .attr('d', function (d) {
            return chart.line(d.items);
        });

    this.svg.selectAll('.point circle')
     .attr('cx', function (d) { return chart.xScale(d.key); })
     .attr('cy', function (d) { return chart.yScale(d.value); });

此处，chart.line对应于先前创建的d3线生成器。

当源数据发生变化时，我可以通过设置数据来更新该行：

    this.svg.selectAll('.line')
        .data(this.data);

但我无法弄清楚如何用数据点（圆圈）做同样的事情。

我尝试了以下内容，但单个点上的数据实际上并未更新。这里第一个控制台日志（在选择.point元素之后）返回正确的数据，但cx属性函数返回旧数据。

    var series = this.svg.selectAll('.series')
            .data(this.data)
            .selectAll('.point')
                .data(function (d) {
                    console.log(d.items);
                    return d.items;
                })
                .selectAll('circle')
                .attr('class', 'updated')
                .attr('cx', function (d) { console.log(d); return chart.xScale(d.key); })
                .attr('cy', function (d) { return chart.yScale(d.value); });