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

要格式化我的刻度线以显示一周中的某一天，我可以使用：

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

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

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

最佳答案

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

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

这是常规轴：

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>

关于javascript - 如何将星期几格式化为单个字母？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43010230/