javascript - 轴未显示域中的第一个元素

Question

这是我在Stacked Area viz 上的代码。

//ds: Thu Oct 31 2019 00:00:00 GMT+0000
//df: Wed Sep 30 2020 00:00:00 GMT+0000 

this.scaleX = d3
    .scaleTime()
    .domain([ds, df])
    .range([0, this.vizWidth]);

config.xAxis = d3
    .axisBottom(this.scaleX)
    .ticks(12)
    .tickFormat(this.dateFormatter);

 dateFormatter(date: any): any {
   try {
     const d = moment(new Date(date)).format('YYYY MMM');
     console.log(`dateFormatter...`);      // ==> I added this line
     console.log(d);                       // ==> it's not displaying it either           
     return d;
   } catch (err) {
     console.log(err);
   }
 }

域是财政年度，即从 2019 年 10 月到 2020 年 9 月。我的底轴跳过了第一个标记，即2019 年 10 月。我添加的 console.log 产生了这个结果

dateFormatter...
2019 Nov
dateFormatter...
2019 Dec
dateFormatter...
2020 Jan
dateFormatter...
...
...

看起来，2019 年 10 月只是被忽略了。我花了一整天的时间查看文档为什么它会跳过第一个元素，但找不到原因。

感谢您的帮助。

Answer 1

D3 轴是动态生成的，特别是时间尺度的轴。在时间轴上定义您想要的确切值在时间轴上是出了名的困难，有时可能会很棘手。

例如，没有十月，即使域从 01-Oct 开始:

const svg = d3.select("svg");
const scale = d3.scaleTime()
  .domain([new Date("2019-10-01"), new Date("2020-09-01")])
  .range([30, 570]);
const axis = d3.axisBottom(scale)(svg.append("g").attr("transform", "translate(0,50)"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="600" height="100"></svg>

为保证始终显示域限制，请使用 tickValues 连接域数组。您可以在域数组中使用两个值，也可以只使用一个:

axis.tickValues(scale.ticks().concat(scale.domain()[0]));

axis 是轴生成器，scale 是比例尺。

结果如下:

const svg = d3.select("svg");
const scale = d3.scaleTime()
  .domain([new Date("2019-10-01"), new Date("2020-09-01")])
  .range([50, 550]);
const axis = d3.axisBottom(scale)
  .tickValues(scale.ticks().concat(scale.domain()[0]))(svg.append("g").attr("transform", "translate(0,50)").attr("class", "axis"));
d3.selectAll(".axis .tick:last-child text")
  .text(d => d3.timeFormat("%B")(d))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="600" height="100"></svg>

最后，请注意一个事实，因为我们不知道 D3 将如何生成那个刻度，我选择它并将其格式化为月份(在本例中，使用 "%B"说明符)。