javascript - 如何将星期几格式化为单个字母？

Question

要格式化我的刻度以显示一周中的缩写日，我可以使用:

.tickFormat(d3.timeFormat("%a"))//Mon Tue Wed Thu Fri Sat Sun

如何将星期几格式化为单个字母？

.tickFormat(d3.timeFormat())//M T W T F S S

Answer 1

没有 time format在 D3 库中只显示当天的第一个字母。

不过，这里的任务很简单。首先，让我们看一个常规轴，然后展示几个解决方案。

这是常规轴:

var svg = d3.select("svg")
var scale = d3.scaleTime()
  .range([20, 480])
  .domain([new Date(), new Date().setDate(new Date().getDate() + 7)]);

var axis = d3.axisBottom(scale)
  .tickFormat(d3.timeFormat("%a"))
  .ticks(d3.timeDay);

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

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

解决方案 #1:使用 substring:

.tickFormat(function(d) {
    return d3.timeFormat("%a")(d).substring(0, 1)
})

这是演示:

var svg = d3.select("svg")
var scale = d3.scaleTime()
  .range([20, 480])
  .domain([new Date(), new Date().setDate(new Date().getDate() + 7)]);

var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    return d3.timeFormat("%a")(d).substring(0, 1)
  })
  .ticks(d3.timeDay);

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

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

解决方案#2:使用切片:

.tickFormat(function(d) {
    return d3.timeFormat("%a")(d).slice(0, 1)
})

这是演示:

var svg = d3.select("svg")
var scale = d3.scaleTime()
  .range([20, 480])
  .domain([new Date(), new Date().setDate(new Date().getDate() + 7)]);

var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    return d3.timeFormat("%a")(d).slice(0, 1)
  })
  .ticks(d3.timeDay);

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

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

解决方案#3:使用 charAt:

.tickFormat(function(d) {
    return d3.timeFormat("%a")(d).charAt(0)
})

这是演示:

var svg = d3.select("svg")
var scale = d3.scaleTime()
  .range([20, 480])
  .domain([new Date(), new Date().setDate(new Date().getDate() + 7)]);

var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    return d3.timeFormat("%a")(d).charAt(0)
  })
  .ticks(d3.timeDay);

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

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

解决方案#4:使用索引:

.tickFormat(function(d) {
    return d3.timeFormat("%a")(d)[0]
})

这是演示:

var svg = d3.select("svg")
var scale = d3.scaleTime()
  .range([20, 480])
  .domain([new Date(), new Date().setDate(new Date().getDate() + 7)]);

var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    return d3.timeFormat("%a")(d)[0]
  })
  .ticks(d3.timeDay);

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

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

解决方案#5:使用正则表达式(仅仅因为):

.tickFormat(function(d) {
    return d3.timeFormat("%a")(d).match('^.{0,1}')
})

这是演示:

var svg = d3.select("svg")
var scale = d3.scaleTime()
  .range([20, 480])
  .domain([new Date(), new Date().setDate(new Date().getDate() + 7)]);

var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    return d3.timeFormat("%a")(d).match('^.{0,1}')
  })
  .ticks(d3.timeDay);

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

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