d3.interval有兩個引數callback and delay，例如
d3.interval(callback, delay)。
我想知道是否可以為每個間隔傳遞動態延遲。
例如，在下面，我要求延遲interval運行。1000ms但是有沒有辦法我可以要求分別d3.interval運行0ms, 1000ms, 2000ms, 3000msinterval# 1,2,3,4。
我試過了，desiredDelay[counterF]但沒有用。
const masterSelection = d3.selectAll('[class^="text"]');
const node = masterSelection.nodes();
const len = node.length - 1;
let counterF = 0;
const del = 1000;
const desiredDelay = [0, 1000, 2000, 3000]
let ticker = d3.interval(
e => {
const element = masterSelection['_groups'][0][counterF];
const selection = d3.select(element).node();
console.log(selection);
counterF ;
(counterF > len) ? ticker.stop(): null
}, del
)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<div class='text1'>one</div>
<div class='text2'>two</div>
<div class='text3'>three</div>
<div class='text4'>four</div>
</body>
<script type="text/javascript" src="prod.js"></script>
</html>uj5u.com熱心網友回復：
簡短的回答：你不能。
如果您查看源代碼，您會發現如果延遲不是null...
if (delay == null) return t.restart(callback, delay, time), t;
...它將使用一元加號運算子強制轉換為一個數字：
t.restart = function(callback, delay, time) {
delay = delay,
etc...
您可以做的是創建自己的區間函式，這超出了此答案的范圍。
uj5u.com熱心網友回復：
改編自此，以下內容可以根據需要進行作業，并且可以與d3.timeout.
const masterSelection = d3.selectAll('[class^="text"]');
const node = masterSelection.nodes();
const len = node.length - 1;
let counter = 0;
//const del = 1000;
const delay = [0, 1000, 2000, 3000];
function show() {
const element = masterSelection["_groups"][0][counter];
const selection = d3.select(element).node();
console.log(selection);
counter ;
if (counter > len) return
d3.timeout(show, delay[counter]);
}
show();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<div class='text1'>one</div>
<div class='text2'>two</div>
<div class='text3'>three</div>
<div class='text4'>four</div>
</body>
<script type="text/javascript"></script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/504317.html
標籤：javascript d3.js