I am having a slight problem with my d3 transitions.
After a page refresh, the transition occurs instantaneously. I want the first transition after the page refresh to take 1 second like the others.
JSFiddle
Here's a snippet
const name_ = d3.select('#name_container');
const M = name_
.append('text')
.attr('y', 50)
.attr('x', 50)
.attr('font-size', '2em')
.text('M')
.attr('fill', 'blue')
.style('pointer-events', 'none');
const M_backboard = name_
.append('rect')
.attr('x', 50)
.attr('y', 50)
.attr('width', 50)
.attr('height', 50)
.on('mouseover', function() {
M.transition().duration(1000)
.attr('opacity', 0);
})
.on('mouseout', function() {
M.transition().duration(1000)
.attr('opacity', 1);
});
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#">
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<svg id=name_container></svg>
<script src=index.js></script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
