带有 d3.js 的日期轴标签

Question

我的 d3 折线图的日期轴包含月份和工作日的混合。我只希望它是月份和月份中的日期（例如 2 月 15 日）。

chart with weird axis

有人知道如何解决这个问题吗？

d3.js 超级新手所以打扰一下。

谢谢！

//create scales
const yScale = d3.scaleLinear()
    .domain(d3.extent(dataset,  yAccessor))
    .range([dimensions.boundedHeight, 0])


const xScale = d3.scaleTime()
    .domain(d3.extent(dataset, xAccessor))
    .range([0, dimensions.boundedWidth])

// draw data 
const lineGenerator = d3.line()
.x(d => xScale(xAccessor(d)))
.y(d => yScale(yAccessor(d)))

const line = bounds.append("path")
  .attr("d", lineGenerator(dataset))
  .attr("fill", "none")
  .attr("stroke", "#af9358")
  .attr("stroke-width", 2)

//draw peripherals
const yAxisGenerator = d3.axisLeft()
    .scale(yScale)

const yAxis = bounds.append("g")
    .call(yAxisGenerator)

const xAxisGenerator = d3.axisBottom()
    .scale(xScale)

const xAxis = bounds.append("g")
    .call(xAxisGenerator)
      .style("transform", `translateY(${
        dimensions.boundedHeight
      }px)`)

const xAxisLabel = xAxis.append("text")
    .attr("x", dimensions.boundedWidth / 2)
    .attr("y", dimensions.marginBottom -10)
    .attr("fill", "black")
    .style("font-size", "1.4em")
    //.html("Date")
    }
drawLineChart()

Answer 1

我自己使用
解决了这个问题 .tickFormat(d3.timeFormat ("%d %b")) 作为轴函数的方法即

const xAxisGenerator = d3.axisBottom()
    .scale(xScale)
    .tickFormat(d3.timeFormat ("%d %b"))

带有 d3.js 的日期轴标签

Date axis labels with d3.js

javascript

d3.js