d3：折线图 x 轴——如何让 tickValues 具有相同的填充？答案

【问题标题】：d3: line chart x-axis -- How to have tickValues with same padding?d3：折线图 x 轴——如何让 tickValues 具有相同的填充？
【发布时间】：2015-08-04 10:45:22
【问题描述】：

我是 d3.js 的新手，正在尝试构建折线图。它具有应显示的特定刻度值。但是我想显示彼此之间具有相同填充的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 之间打开这种缩放并在每个刻度之间获得相同的填充？

【问题讨论】：

你看过ordinal scales吗？
不，没看到，谢谢。你能告诉我哪些设置域和范围应该有序数比例吗？

标签： javascript d3.js

【解决方案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。

【讨论】：