JavaScriptのエラーの原因
あるコードでエラーがでて原因がさっぱり解りません。下記コードは、そのエラーが消えないように最小限のコードにそぎ落としたものです。四角が大きくなったり小さくなったりするだけのアニメーションです。buttonを押すとエラーになります。consoleに赤色で0と表示されるだけのエラーです。かれこれ1ヶ月くらい解決できません。これはいったい何のエラーなのでしょうか？
<html>
<body>
<button>button</button>
<div id='example'></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
const svg =d3.select("#example")
.append("svg")
.attr("width",300)
.attr("height",150)
let path = svg.selectAll("path")
.data([0])
.join("path")
.attr("d","M0,0 L300,0 300,150 0,150")
async function plot(){
let b=0;
try{
while(true){
await path
.data([0])
.transition()
.delay(1000)
.duration(1500)
.attr("d",b?"M0,0 L300,0 300,150 0,150":"M0,0 L30,0 30,15 0,15")
.end();
b=!b
}
}catch(e){// このcatchがないと Uncaught (in promise) と表示される
console.error(e);
}
}
d3.select("button")
.on("click",() => {
path.interrupt() ;
plot();
})
plot();
</script>
</body>
</html>
