scaleTime 最小刻度值答案

【问题标题】：scaleTime minimum tick valuescaleTime 最小刻度值
【发布时间】：2017-03-23 22:41:47
【问题描述】：

使用 d3 我将 xAxis 定义为

var xScale = d3.scaleTime()
  .domain([fromDate, toDate])
  .range([0, width]);

var xAxis = d3.axisBottom(xScale);

function customXAxis(g) {
  g.call(xAxis);
  g.select(".domain").remove();
  g.selectAll(".tick line").attr("stroke", "white");
  g.selectAll(".tick text").attr("fill", "white");
}

g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(customXAxis);

确实一切运行良好。

但是，我希望秤至少显示一天的刻度。就目前而言，如果 fromData 和 toDate 仅相差几天，它就会显示滴答声....

Mon-10___12PM___Tue-11___12PM___Wed-13___12PM___Thu-14___12PM

如何让它不显示时间值？

任何帮助表示赞赏。

【问题讨论】：

只是一个建议：将问题的标题更改为最小刻度间隔，而不是值。

标签： javascript d3.js scale

【解决方案1】：

您可以在轴生成器中设置intervals：

在给定指定的下限和偏移函数以及可选的计数函数的情况下构造一个新的自定义间隔。

例如，这是您的代码（此处的域只有 3 天）：

var svg = d3.select("svg");

var xScale = d3.scaleTime()
  .domain([new Date("January 1, 2017 00:00:00"), new Date("January 4, 2017 00:00:00")])
  .range([20, 480]);

var xAxis = d3.axisBottom(xScale);

svg.append("g")
  .attr("transform", "translate(0,100)")
  .call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500"></svg>

现在相同的代码，d3.timeDay:

var svg = d3.select("svg");

var xScale = d3.scaleTime()
  .domain([new Date("January 1, 2017 00:00:00"), new Date("January 4, 2017 00:00:00")])
  .range([20, 480]);

var xAxis = d3.axisBottom(xScale)
  .ticks(d3.timeDay)
  .tickFormat(d=>d3.timeFormat("%a %d")(d));

svg.append("g")
  .attr("transform", "translate(0,100)")
  .call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500"></svg>

PS：tickFormat只是换了第一个tick，不用理会。p>

【讨论】：