scaleBand() 将值左移

Question

我现在不知道我做错了什么。scalePoint 可以工作并且值与轴一致，但scaleBand 由于某种原因会向左移动。

我的小提琴： https://jsfiddle.net/go0r0yco/

从我的文件中选择的代码部分：

var x = d3.scaleBand() 
        .range([0, width]);

var y = d3.scaleLinear()
        .range([height, 0]);


var xAxis = d3.axisBottom()
    .scale(x);

var yAxis = d3.axisLeft()
    .scale(y);


// the domain
x.domain(myData.map(function (d)  
{   
    console.log(d.ball);
    return d.ball;
}));


y.domain([0, d3.max(myData, function (d)
{   
    //console.log("our maxtime" + d.finaltime);
    return d["ball data"]["final time"];
})]);   

// the scatterplot
myChart.selectAll("dot")
    .data(myData)
    .enter()
    .append("circle")
    .style("fill", "orange")
    .attr("r", 5)
    .attr("cx", function (d)
    {
        return x(d.ball);
    })
    .attr("cy", function (d)
    {
        if (!d["ball data"]["final time"]) { return height/2 } else { 
        return y(d["ball data"]["final time"]);}
    });

Answer 1

带标尺不会将值向左移动。您在图表中得到的是预期的行为，这正是scalePoint和之间的区别scaleBand。在频带范围内：

通过将连续范围划分为均匀带（强调我的），可以通过比例自动计算离散输出值。

现在，对于每个圆圈，您都将获得乐队的开始：

return x(d.ball);

因此，要获得类似于点刻度的输出，您应该将范围除以 2：

return x(d.ball) + x.bandwidth()/2;

这是你的小提琴： https: //jsfiddle.net/jxdsqqwy/