[英]Date axis labels with d3.js
我的 d3 折线图的日期轴包含月份和工作日的混合。 我只希望它是月份和月份的日期(例如 2 月 15 日)。
有谁知道如何解决这一问题?
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()
我自己使用修复了这个
.tickFormat(d3.timeFormat ("%d %b"))
作为轴上的方法 function 即
const xAxisGenerator = d3.axisBottom()
.scale(xScale)
.tickFormat(d3.timeFormat ("%d %b"))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.