javascript - 为什么 html 输入表单与 d3 强制布局冲突？

Question

通常:

我正在尝试从输入表单中获取值并将其传递给与力布局图连接的数组(节点[])

问题:

添加唯一的表单时，它可以编辑

d3.select('body').append('input')

https://jsfiddle.net/uohc4w8p/

但是在附加图形时，它停止监听键盘

var force = d3.layout.force()

https://jsfiddle.net/FullName/9nekhp6a/

您能说说，输入表单显示的行为类型及其原因吗？

Answer 1

问题出在您的 keydown 函数上。您在那里调用 d3.event.preventDefault();

当您以这种方式使用该功能时，这可以防止所有按键事件被发送到窗口中的任何其他元素:

d3.select(window)
 .on('keydown', keydown)
 .on('keyup', keyup);

窗口首先接收事件并阻止 keydown 事件传播到任何其他元素，包括 input 元素。

如果删除 d3.event.preventDefault(); 行，输入将再次起作用。