javascript - scaleBand() 将值左移

Question

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

我的 fiddle : 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 之间的区别。在频带范围内:

Discrete output values are automatically computed by the scale by dividing the continuous range into uniform bands (emphasis mine).

现在，对于每个圆圈，您将获得带的开始:

return x(d.ball);

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

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

这是你的 fiddle :https://jsfiddle.net/jxdsqqwy/