我有一個使用 D3.js 的 ASP.NET 應用程式。我有一個時間滑塊，可以在我的網頁上顯示，我想逐月增加它。
但是，以我使用的方法，我只能按天完成。
這是我的代碼。
var MinDate = formatDate_t( new Date(Math.min(...dates)));
var MaxDate = formatDate_t(new Date(Math.max(...dates)));
// MinDate and MaxDate came from my database.
var interval = (new Date(MaxDate)).getFullYear() - (new Date(MinDate)).getFullYear() 2;
console.log(interval);
var dataTime = d3.range(0, interval).map(function (d) {
return new Date(((new Date(MinDate)).getFullYear()) d, 0, 1);
});
var sliderTime = d3
.sliderBottom()
.min(d3.min(dataTime))
.max(d3.max(dataTime))
.step(1000 * 60 * 60 * 24 * 30)
.width(800)
.tickFormat(d3.timeFormat('%b-%Y'))
.tickValues(dataTime)
.default([new Date(MinDate), new Date(MaxDate)])
var gTime = d3
.select('div#slider-time')
.append('svg')
.attr('width', 1250)
.attr('height', 100)
.append('g')
.attr('transform', 'translate(30,30)');
在“.step(1000 * 60 * 60 * 24 * 30)”行，我想每個月準確地增加它，而不是每 30 天。
可能嗎？
謝謝你的幫助。
uj5u.com熱心網友回復：
當您需要滑塊捕捉到不等距的值時，您應該使用slider.marks而不是。slider.step在您的示例中，在您的時間間隔中創建一個月份陣列，并將它們用作slider.marks.
const minDate = new Date('1998-01-11'),
maxDate = new Date('2021-12-17'),
interval = maxDate.getFullYear() - minDate.getFullYear() 1,
startYear = minDate.getFullYear();
let dataMonths = [];
for (let year = 0; year < interval; year ) {
for (let month = 0; month < 12; month ) {
dataMonths.push(new Date(startYear year, month, 1));
}
}
const sliderTime = d3
.sliderBottom()
.min(d3.min(dataMonths))
.max(d3.max(dataMonths))
.marks(dataMonths)
.width(500)
.tickFormat(d3.timeFormat('%b %Y'))
.tickValues(dataMonths.filter(d => d.getMonth === 0))
.default(minDate);
const gTime = d3
.select('div#slider-time')
.append('svg')
.attr('width', 600)
.attr('height', 100)
.append('g')
.attr('transform', 'translate(30,30)');
gTime.call(sliderTime);<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://unpkg.com/d3-simple-slider"></script>
<div id="slider-time"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/440741.html
標籤：javascript 网 d3.js
下一篇：單擊按鈕關閉uialert圖