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

Question

我一直在尝试找出如何在我制作的 Bootstrap 模态中清除 HTML 表单，我主要使用 D3js 进行 object 操作。 但是，因为我一直在尝试使用 D3 重置表单的值（例如d3.select('#my-text-input').attr('value', '')或d3.select('#my-text-input').attr('value', null) )，值仍然存在。 我发现在 HTML 中默认有.reset() function，但每次我尝试使用d3.select('#my-form').reset()一些变体时，我都会收到一条错误消息，说这是不是 D3 function。

这引出了我更大的问题：有没有办法将内置的 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存储库上有一小段信息。

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