如何将一周中的某一天格式化为单个字母？

Question

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

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

如何将一周中的某一天格式化为单个字母？

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

Answer 1

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

.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>