我正试图彻底了解d3如何(以及如果)观察对底层数据的更改。
到目前为止,我已经有了这个例子:
http://jsfiddle.net/AyKarsi/x95dk3uu/1/
理想情况下,我想彻底删除调用
的必要性draw()
功能,让d3处理对数据的更改。
在一个简单的例子中,像上面一样,更新什么并不重要,但如果有很多数据重绘,整个图表感觉不对..:)
那么我怎样才能改进上面的例子并提高效率呢?
答案 0 :(得分:1)
d3不会观察到您的dataSet
。您仍然需要致电draw()
。
感觉很好并且它运行得很快,因为每次调用draw()
时它都会重用现有节点。此外,您可以使用key function
将元素绑定到数据,然后即使项目的顺序发生更改,它仍将重用具有特定数据的节点。
在此处详细了解data
此处https://github.com/mbostock/d3/wiki/Selections#data和key functions
http://bost.ocks.org/mike/constancy/#key-functions
关键功能可以独立于提高性能 过渡。例如,如果过滤大表,则可以使用 减少DOM修改次数的关键功能:重新排序DOM 更新选择中的元素而不是重新生成它们