如何在D3js中使用默认HTML DOM函数

Question

我一直在试图找出如何在我所做的Bootstrap模式中清除HTML表单，我主要使用D3js进行对象操作。但是，由于我一直试图使用D3(如d3.select('#my-text-input').attr('value', '')或d3.select('#my-text-input').attr('value', null))重置表单的值，值仍然存在。我发现有.reset()函数在HTML中默认，但每次我尝试使用d3.select('#my-form').reset()的一些变化，我得到一个错误，说这不是D3函数。

这导致我更大的问题:有一种方法来使用内置的HTML方法与D3选择?

作为旁注，我发现了和回答我自己的问题，我已经张贴，以防一些可怜的灵魂有同样的问题，因为我。然而，我非常愿意接受其他关于这个主题的提示、评论或建议。

Answer 1

幸运的是，看起来有一个解决方法。
如果你在D3选择后添加.node()，你可以使用HTML内置方法。例如，我是这样在自己的代码中使用.reset()的:

d3.select('#my-form').node().reset()

或者:

let form = d3.select('#my-form').node()  
form.addEventListener('hidden.bs.modal', (e) => {
form.reset()
}

'hidden.bs.modal'是Bootstrap 5添加的事件监听器。在Github文档中没有很多关于D3的selection.node()的信息，但是在D3 -selection存储库中有一小段。

欢迎任何其他指示。我一直在努力成为一个更好的开发者。我只是觉得这可能会帮助到别人。