在我的 d3.js 圖表中，我有 2002 年到 2023 年的資料。
我使用 驗證了這一點x.domain()，它回傳：
0: Wed Jul 31 2002 00:00:00 GMT 0200 (Central European Summer Time) {}
1: Mon Jul 31 2023 00:00:00 GMT 0200 (Central European Summer Time) {}
然后我嘗試創建 x 軸刻度：
let x = d3.scaleTime()
.rangeRound([0, 600]);
let fiscal_year_ends_month = 10;
d3.axisBottom(x)
.tickFormat(d3.timeFormat("%m/%y")).ticks(data.length < 60 ? d3.timeMonth : d3.timeYear)
.ticks(d3.timeDay.filter(function(d) {
return d.getMonth() === fiscal_year_ends_month;
}))
這應該遍歷范圍內的所有日期，找到滿足月份是我輸入的條件的日期，并創建刻度。
然而，它運行無限。
具體來說，如果我這樣做：
.ticks(d3.timeDay.filter(function(d) {
console.log(d.getFullYear(), d.getMonth(), d.getDate());
return d.getMonth() === fiscal_year_ends_month;
}))
它似乎在我的x.domain（2023）結束時開始并倒退到無窮大。我讓它運行了一段時間，最后一次輸出console.log是公元前 322 年 6 月 10 日：
-322 5 10
不用說，我的股市資料圖表應該不是從公元前 4 世紀開始的
為什么行程不只通過我的x.domain()?
uj5u.com熱心網友回復：
可以像這樣重新創建問題：
.ticks(d3.timeDay.filter(function(d) {
console.log(d.getFullYear(), d.getMonth(), d.getDate());
return false; // <--- generates infinite loop backward in time !!
}))
這表明您的輸入資料中存在與您嘗試過濾的月份索引有關的問題。它還表明庫中有一個錯誤，讓我們發生這種情況......
隨著fiscal_year_ends_month = 10我假設你正在尋找只有十一月蜱每年的資料呢？d3.timeMonth您可以使用一個間隔用于此目的，例如：
.ticks(d3.timeMonth.filter(function(d) {
return d.getMonth() === fiscal_year_ends_month;
}));
作業示例：
// your constant
const fiscal_year_ends_month = 10;
// sample data
let data = [];
for (let i= 0; i<2370; i ) {
let d = new Date()
data.push({
dt: d.setDate(d.getDate() i),
val: i
});
}
// time scale
let x = d3.scaleTime()
.domain(d3.extent(data, d => d.dt))
.range([0, 540]);
// render
let svg = d3.select("body")
.append("svg")
.attr("width", 600)
.attr("height", 150)
.append("g")
.attr("transform", "translate(30,30)");
let xAxis = d3.axisBottom(x)
.tickFormat(d3.timeFormat("%m/%y"))
.ticks(d3.timeMonth.filter(function(d) {
return d.getMonth() === fiscal_year_ends_month;
}));
svg.append("g")
.attr("transform", "translate(0,90)")
.call(xAxis);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/352715.html
標籤：javascript d3.js