d3.js 时间刻度轴刻度不等间距答案

【问题标题】：d3.js time scale axis ticks are not equally spacedd3.js 时间刻度轴刻度不等间距
【发布时间】：2019-12-11 11:10:59
【问题描述】：

我使用 d3.js-v3 时间刻度 d3.time.scale() 绘制了我的 x 轴。
我的轴刻度不等间距。

我怎样才能有等距的刻度？

这是我的代码

var customTimeFormat = d3.time.format("%d %b");

var margin = {
    top: 0,
    right: 20,
    bottom: 20,
    left: 20
  },
  width = 550 - margin.left - margin.right,
  height = 20 - margin.top - margin.bottom;

var x = d3.time.scale()
  .domain([new Date("08/21/2019"), new Date("09/5/2019")])
  .range([0, width]);

var xAxis = d3.svg.axis()
  .scale(x)
  .tickFormat(customTimeFormat);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

&lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

d3.time.scale 每两天创建一个刻度，但在每月的第一天重置刻度，给人一种不想要的印象，即比例不均匀。

可以使用ticks 函数控制此行为，如下所示。

.ticks(d3.time.day, 1) 每天会显示一个刻度。

var customTimeFormat = d3.time.format("%d %b");

var margin = {
    top: 0,
    right: 20,
    bottom: 20,
    left: 20
  },
  width = 550 - margin.left - margin.right,
  height = 20 - margin.top - margin.bottom;

var x = d3.time.scale()
  .domain([new Date("08/20/2019"), new Date("09/05/2019")])
  .range([0, width]);

var xAxis = d3.svg.axis()
  .scale(x)
  .tickFormat(customTimeFormat)
  .ticks(d3.time.day, 1);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

&lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您可以通过将其添加到轴定义中以 2 天的间隔获取刻度

.ticks(d3.timeDay.filter(d => d3.timeDay.count(0, d) % 2 === 0))

使用 d3 v5.7.0 查看代码 sn-p

var customTimeFormat = d3.timeFormat("%d %b");

var margin = {
    top: 0,
    right: 20,
    bottom: 20,
    left: 20
  },
  width = 550 - margin.left - margin.right,
  height = 20 - margin.top - margin.bottom;

var x = d3
  .scaleTime()
  .domain([new Date("08/20/2019"), new Date("09/7/2019")])
  .range([0, width]);

var xAxis = d3
  .axisBottom()
  .scale(x)
  .ticks(d3.timeDay.filter(d => d3.timeDay.count(0, d) % 2 === 0))
  .tickFormat(customTimeFormat);

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg
  .append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<html>
<body>
</body>
</html>

【讨论】：