D3-将插值点添加到趋势线

Question

我正在编写一个React应用程序，想要绘制一个带有插值点的折线图，类似于下面的蓝色十字形：

使用Nivo几乎可以实现我想要的功能，但这只能基于数据明确地列出要点。我想做的是基于x轴说明沿趋势线的插值点。是否可以直接使用Nivo或D3来做到这一点？

我当前用于折线图的代码：

import React, { Component } from 'react';
import { Line } from 'nivo';

class LineGraph extends Component {
    render() {
        return (
            <div className="line-graph">
                <Line
                    width={600}
                    height={350}
                    margin={{
                        top: 20,
                        right: 20,
                        bottom: 60,
                        left: 60,
                    }}
                    data={[{
                        id: 'Distribution',
                        data: [
                            {x: '1', y: 0.09 },
                            {x: '2', y: 0.16 },
                            {x: '3', y: 0.5 },
                            {x: '4', y: 0.06 },
                            {x: '5', y: 0.19 },
                    ]
                    }]}
                    colors="#ff6384"
                    enableArea
                    yScale={{ type: 'linear', stacked: false }}
                    curve="monotoneX"
                    dotSize={8}
                    dotBorderColor="#ff6384"
                    dotBorderWidth={2}
                />
            </div>
        );
    }
}