我的 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()
uj5u.com熱心網友回復:
.tickFormat(d3.timeFormat ("%d %b"))
自己使用作為軸函式的方法修復了這個問題,即
const xAxisGenerator = d3.axisBottom()
.scale(xScale)
.tickFormat(d3.timeFormat ("%d %b"))
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/427831.html
標籤:javascript d3.js
