D3-使用图表中的数据添加数据点

Question

我这里有个突如其来的飞车-https://stackblitz.com/edit/d3-one-y-axis?embed=1&file=src/app/bar-chart.ts&hideNavigation=1

我有一个堆积的条形图，顶部是折线图。

条形图和折线图有两个不同的数据集，我使用了一个y轴绘制折线图数据。

折线图点是每个月列中两个堆积图的总计。

代替折线图具有单独的数据和y轴，可以将每个月堆积的条形图上的数据相加并使用一个y轴在图表上标出

Answer 1

可以通过多种方式实现。您可以使用所有三个line.x，.y，.defined参数重新定义d，i和data访问者，也可以像这样映射数据这个：

.data(
    linedata.reduce(function(acc, current, index) {
        let isFirstPair = index % 2 === 0;
        let currentDate = that.y1(current.date)
        let currentValue = that.y1(current.value)

        if (isFirstPair) {
            acc.push({ date: currentDate, value: currentValue });
        } else {
            acc[acc.length - 1].value += currentValue;
        }

        return acc;
    }, [])
)

它将为源数组中的每个后续对创建一个新对象。您可能需要调整日期或.x访问器。