javascript - scaleBand()将值左移

我不知道我现在在做什么错。
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"]);}
    });

最佳答案

波段比例不会将值向左移动。您在图表中得到的是预期的行为，而这恰恰是scalePoint和scaleBand之间的区别。在乐队范围内：


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


现在，对于每个圈子，您都将开始乐队的发展：

return x(d.ball);

因此，要获得类似于点刻度的输出，应将频段除以2：

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

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