Javascript scaleBand（）将值向左移动

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

我的小提琴：

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

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;

---

这是你的小提琴：

Hmmm可能不是最好的解决方案，但是

.attr（“cx”，函数（d，i）{//添加一半带宽返回x（d.ball）+（x.bandwidth（）/2）；}）

。希望这有帮助。