如何使用 D3.js 实现过渡持续时间?

Question

mouseenter时应该会弹出一个文本框。它目前有效，但是没有逐渐过渡，它是瞬时的。 这是我到目前为止的代码：

let svgTarget = document.querySelector('svg #target' + newId);
let tr = d3.transition()
.duration(5000)
.ease(d3.easeLinear);
svgTarget.addEventListener('mouseenter', function (e) {
d3.select('svg #tooltip' + newId)
.transition(tr)
.duration(8000)
.ease(d3.easeLinear)
.style("display", "inline");
},)

mouseenter功能有效并显示框，但同样是即时的。有什么想法或建议吗？谢谢！

Answer 1

要添加侦听器，请使用selection.on((。

与 D3 中的许多内容一样，事件侦听器对选择进行操作：

d3.select('svg #tooltip' + newId)
.on('mouseenter', function() {
d3.select(this) // this being the prior selection
.transition(tr)
.duration(8000)
.ease(d3.easeLinear)
.style("display", "inline");
});