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：

根据指定的floor和offset函数以及可选的count函数构造一个新的自定义间隔。

例如，这是您的代码（这里的域只有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只是为了改变第一个滴答，不要注意它。

scaleTime最小刻度值

1 个答案: