自定义轴刻度数D3

Question

我已经看了几个不同的解决方案来解决这个问题，但是找不到一个有效的解决方案。我正在尝试为具有正好10个刻度的图形设置X轴（然后轴的末端也作为刻度线）。我正在使用以下内容尝试执行此操作：

var xValue = function(d) {
        return d.Time;
    },
    xScale = d3.scale.linear().range([0, width]),
    xMap = function(d) {
        return xScale(xValue(d));
    },
    xAxis = d3.svg.axis().scale(xScale)
    .tickFormat("")
    .ticks(10)
    .orient("bottom");

xScale.domain([0, d3.max(tableData, xValue) + 1]);

然而，这只产生8或16个刻度，我似乎无法得到它来产生我需要的数字。我做错了什么？

Answer 1

您可以使用轴上的.tickValues()方法准确指定您想要的刻度。使用tickValues，您可以提供一系列刻度线，这些刻度线恰好是图表上显示的刻度线。

你的轴看起来像这样：

xAxis = d3.svg.axis().scale(xScale)
.tickFormat("")
.tickValues([1,2,3,4,5,6,7,8,9,10])
.orient("bottom");

当然，如果您只有max和min值，则可能需要使用循环来填充数组，然后将最终数组作为参数传递给tickValues。