javascript - scaleTime 最小刻度值

Question

使用 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

如何让它不显示一天中的时间值？

感谢任何帮助。

Answer 1

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

Constructs a new custom interval given the specified floor and offset functions and an optional count function.

例如，这是您的代码(此处的域只有 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只是改变第一个刻度，不用理会。