d3：折线图x轴 - 如何使用相同填充的tickValues？

Question

我是d3.js的新手并试图建立一个折线图。它有特定的tickValues，应该显示。但我想在彼此之间显示相同填充的tickValues，即使它们的增加不同。

这是我的价值观：

var data = [{
        "db": "10",
        "freq": "125"
    }, {
        "db": "15",
        "freq": "250"
    }, {
        "db": "40",
        "freq": "500"
    }, {
        "db": "30",
        "freq": "1000"
    }, {
        "db": "20",
        "freq": "2000"
    }, {
        "db": "30",
        "freq": "4000"
    }, {
        "db": "10",
        "freq": "8000"
    }];

这是x轴的比例：

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

 var xAxis = d3.svg.axis()
            .scale(x)
            .tickFormat(d3.format('0f'))
            .tickValues([125, 250, 500, 1000, 2000, 4000, 8000])
            .orient("bottom");

这是真实的输出：

这应该如何：

（请忽略颜色和样式，只关注填充）

我尝试了几种缩放类型，刻度等，没有任何效果。如果没有缩放属性，则不会显示tickValues。

我的问题：如何在tickValues之间转换此缩放并在每个tick之间获得相同的填充，即使值不会增加线性？

Answer 1

感谢@Cool Blue我得到了答案。

var x = d3.scale.ordinal()
            .domain(["125", "250", "500", "1000", "2000", "4000", "8000"])
            .rangePoints([0, width]);
x.range();

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

如果你需要从0以外的其他点开始，就像在这个例子中一样，你需要使用rangePoints而不是range或rangeBands。