这里是来自 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/