仅在scaleTime刻度上显示天数

Question

我试图从scaleTime的x轴删除月份和年份，但不知道是否可能：

我尝试使用tickFormat方法但我无法访问月份和年份值。我只通过将比例更改为linearScale并手动格式化值来获得预期结果。

可以通过时间刻度获得预期结果吗？

＆＃13;

＆＃13;

const margin = { top: 20, right: 20, bottom: 20, left: 20 };
const width = 1000 - margin.top - margin.bottom;
const height = 100 - margin.left - margin.right;
const totalWidth = width + margin.top + margin.bottom;
const totalHeight = height + margin.left + margin.right;

let svg = d3.select('.chart')
  .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight)
  .append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

let xScale = d3.scaleTime()
  .rangeRound([0, width])
  .domain([
    new Date(1482883200000), // 2016-12-28
    new Date(1485993600000) // 2017-02-02
  ]);

let xAxis = d3
  .axisBottom(xScale);

svg.call(xAxis);

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于很难知道如何轴生成器将显示时间刻度的刻度，我建议您在创建它们后过滤刻度：

d3.selectAll(".tick").each(function(d) {
    if (d3.timeFormat("%Y")(d) == d3.select(this).text() ||
        d3.timeFormat("%B")(d) == d3.select(this).text()) {
        d3.select(this).remove();
    }
})

以下是演示：

const totalWidth = 800;
const totalHeight = 100;

let svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

let xScale = d3.scaleTime()
    .rangeRound([20, totalWidth - 20])
    .domain([
        new Date(1482883200000), // 2016-12-28
        new Date(1485993600000) // 2017-02-02
    ]);

let xAxis = d3.axisBottom(xScale);

svg.append("g").attr("transform", "translate(0,40)").call(xAxis);

var format = d3.timeFormat("%a %d");

d3.selectAll(".tick").each(function(d) {
    if (d3.timeFormat("%Y")(d) == d3.select(this).text() || d3.timeFormat("%B")(d) == d3.select(this).text()) {
        d3.select(this).remove();
    }
})

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

Answer 2

您可以简单地使用tickFormat(d3.timeFormat("%d"))

在x轴上设置日期格式

let xAxis = d3
   .axisBottom(xScale);
   .tickFormat(d3.timeFormat("%d")));