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

c9qzyr3d  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(174)

我一直在尝试了解如何在我创建的Bootstrap模态中清除HTML表单,并且我主要使用D3js进行对象操作。(例如d3.select('#my-text-input').attr('value', '')d3.select('#my-text-input').attr('value', null)),值仍然保留。我发现HTML中有一个默认的.reset()函数,但是每次我尝试使用d3.select('#my-form').reset()的某个变体时,我都会得到一个错误消息,说这不是D3函数。
这就引出了我更大的问题:是否有办法将内置的HTML方法与D3选择一起使用?

  • 顺便说一下,我发现了一个**我自己问题的答案,我已经贴了出来,以防一些可怜的灵魂有和我一样的问题。但是,我非常开放的其他提示,评论,或建议,落在这个一般的主题。*
aurhwmvo

aurhwmvo1#

幸运的是,看起来有一个工作。
如果在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 存储库中有一个小片段。
任何其他的指针都是受欢迎的。我一直在努力成为一个更好的开发人员。我只是想这可能会帮助其他人在那里。

相关问题