javascript - d3.js 绘画节点渲染的完成事件是什么？

Question

动态点击节点展开子节点，然后clonenode()tree ，克隆的节点样式不完整， 可以通过加定时器可以解决这个问题，想请问一下有没有类似于vue 的 nextTick()事件

target.node().cloneNode(true);

Answer 1

很遗憾，d3.js 没有类似于 Vue 的 nextTick() 事件。在 d3.js 中，对于节点的渲染完成事件，您可以尝试使用 transition().each("end", function() {...}) 来处理，其中 function() 可以是您的渲染完成回调函数。

关于您提到的动态点击节点展开子节点并克隆节点样式不完整的问题，这可能是因为您在克隆节点后立即尝试更新其样式，但此时 DOM 还未完全更新。使用 transition() 可以确保在样式更新之前 DOM 已经完全更新。

例如：

// 假设您的选择集是 selectionselection.transition()    .duration(1000) // 设置过渡持续时间    .each("end", function() {        // 这里是您的渲染完成回调函数        // 更新样式等操作    });

请注意，transition().each("end", function() {...}) 不能保证在样式更新后 DOM 完全更新，因为 D3 的渲染过程是异步的。您可能需要使用其他机制来确保您的样式更新操作在 DOM 完全更新后执行。如果您发现仍然有问题，那可能需要考虑更复杂的解决方案，例如使用其他机制来确保 DOM 完全更新，然后再执行样式更新操作。