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库中没有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>

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

1 个答案: