javascript - D3 - 另一个事件内的事件绑定(bind)

标签 javascript d3.js

这里是来自 Scott Murray 的书“Interactive Data Visualization for the Web”的一些用于创建条形图的代码。该代码允许生成、更新(添加/删除)和排序条形图。它工作得很好,只是我无法让排序按钮工作。我知道排序功能有效,因为我已向每个栏附加了一个单击事件(运行排序功能)。因此,当单击某个栏时,这些栏就会进行排序。

这是 JSfiddle - http://jsfiddle.net/kiniadit/k812fo53/3/

这是不起作用的代码段(第 74-77 行)

else if(btnClass == "sort"){
    sortBars();
    sortLabels();
}

最佳答案

问题在于您为单击事件设置处理程序函数的方式。您将选择所有按钮并附加一个处理程序,该处理程序在内部确定要执行的操作。此处理程序运行代码来更新所有按钮的栏,无论之前发生了什么。

在您的特定情况下,这意味着排序已正确完成并设置了相应的转换,但随后立即被更新栏的代码取消(以处理添加/删除的值)。在这种情况下,这不会执行任何操作,因此唯一的效果是取消排序处理程序设置的所有内容。

要修复此问题,只需在调用排序函数后退出该函数即可:

return;

完整演示 here .

关于javascript - D3 - 另一个事件内的事件绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27086396/

相关文章:

d3.js - 如何为 D3 条形图应用模式?

d3.js - 使用 "cloned"数据时 D3 中的数据绑定(bind)失败

javascript - 如何使用 d3 找到我的 SVG 的左上角?

javascript - 将鼠标移到 D3 Javascript 中的节点上时如何显示和隐藏节点

javascript - 如何使用 Webpack 构建 React 应用程序并导入 Assets 文件夹?

javascript - 如果第二个 promise 需要第一个 promise 解决结果的元素,如何解决第二个 promise ?

javascript - 当列表项的数量未知时,如何在加载每个列表项后立即对其进行一项一项修改

javascript - d3.select ('svg' ).remove() 不删除图表

javascript - change() 仅在失去焦点时触发

javascript - 使用 eval() JS动态创建对象