Push data performantly
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
Ok, so in my use case, I've got a reasonable number of points (some 500 per chart line, three lines per chart), and about every 20 ms I'm pushing a new data point with `chart.load`. This load causes a redraw, which causes the event rects (500) to be rebuilt. It seems like it should be possible to only redraw new or changed rects, while leaving the rest untouched.
Here's a performance profile:

Most of the time is being taken up in the two methods within redraw: `redrawEventRect` and `redrawCircle`. I suspect a couple of optimizations may be possible:
- What are circles? I believe my chart has none, and so this method could be bypassed entirely. (my `config.point = {show: false};`)
- The redrawEventRect may be able to be called for only one rect (the additional point) or for none at all (there are no new rects being added, only additional points to existing rects).
Perhaps there could be some sort of global dirty tracking, or more simply, a set for updating passed from load - if updates are necessary at all.
I am stymied for a moment in my digging, as `redrawEventRect` seems like it must be called for tooltips.
Can you suggest a good course of action?
Cheers!
PS The animation `duration=0` update in 0.4.9 was a boon. thanks.
Contributor guide
Research direction
Start at the chart.load entry point and profile the redrawEventRect and redrawCircle methods mentioned in the issue, including behavior when config.point.show is false. Compare redraw work for appended points versus existing event rects; done means unnecessary redraws are avoided without breaking tooltip behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- d3, javascript
- Domain
- data-visualization, frontend, performance
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100