圆点与区域形状不对齐

Question

我正在尝试用面积图形状拟合线上的点，但是不适合。我认为这是由于.curve使用了d3.curveBasis。

这是我的方法：

//define x and y scale domain

    yScale

        .domain([0, d3.max(data, d => +d.total_login_count)]);

    yScale2

        .domain([0, d3.max(data, d => +d.unique_user_count)]);

    xScale

        .domain(data.map(d => d.login_date));

    //Generate total login area chart

    let area = d3.area()

        .curve(d3.curveBasis)

        .x(function (d) {

            return xScale(d.login_date);

        })

        .y0(fullHeight)

        .y1(function (d) {

            return yScale(+d.total_login_count)

        });

    //Generate unique user count area chart

    let area2 = d3.area()

        .curve(d3.curveBasis)

        .x(function (d) {

            return xScale(d.login_date);

        })

        .y0(fullHeight)

        .y1(function (d) {

            return yScale2(+d.unique_user_count)

        });

    //Draw bar chart

    let group = svg.selectAll('g')

        .data([data])

        .enter()

        .append('g');

    //Draw area for total login count

    group

        .append('path')

        .attr('class', 'area')

        .attr('d', area);

    //Draw area for unique user count 

    group

        .append('path')

        .attr('class', 'area2')

        .attr('d', area2);

    //Dot points

    let points = group.selectAll('circle')

        .data(data)

        .enter()

        .append('circle');

    //Dot points

    let points2 = group.select('circle')

        .data(data)

        .enter()

        .append('circle');

    points.attrs({

            "cx": d => xScale(d.login_date),

            "cy": d => yScale(+d.total_login_count) + 10,

            "r": 5

        })

        .style("opacity", 1)

        .style('fill', '#F9A2CB');

    points2.attrs({

            "cx": d => xScale(d.login_date),

            "cy": d => yScale2(+d.unique_user_count) + 5,

            "r": 5

        })

        .style("opacity", 1)

        .style('fill', '#8BDBCE');