圆点与区域形状不对齐

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');