Problem of tooltip points offset like #60
alvins7 opened this issue · 18 comments
When I use tooltip the generated points are offset compared to the folded points,
I read the question in #60 and understand that it's a GPU precision issue,
I'd like to ask if it's possible to offset the points generated by the tooltip as well
That offset is random, it can change if you pan X direction. Does the baseTime option solve your problems?
I tried baseTime but got nothing, maybe my usage is wrong, here is my code and data demo
`
Test if we have precision issue with very large X
<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-format@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-time@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-time-format@4"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale@4"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-selection@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-axis@3"></script>
<script src="../dist/timechart.min.js"></script>
<script>
const el = document.getElementById('chart');
let data = [
{
"x": 9599.846,
"y": -0.03945819100642081
},
{
"x": 9599.85,
"y": -0.0318697986096452
},
{
"x": 9599.853,
"y": -0.08958898146336808
},
{
"x": 9599.856,
"y": -0.02609193874550262
},
{
"x": 9599.859,
"y": -0.12385392975357282
},
{
"x": 9599.862,
"y": 0.008514645846914559
},
{
"x": 9599.866,
"y": -0.04682789987495744
},
{
"x": 9599.869,
"y": 0.03138536471533894
},
{
"x": 9599.872,
"y": -0.017757286464644594
},
{
"x": 9599.875,
"y": 0.02569970460305898
},
{
"x": 9599.878,
"y": -0.03655321380456315
},
{
"x": 9599.882,
"y": -0.018751913076899253
},
{
"x": 9599.885,
"y": 0.0273019384720676
},
{
"x": 9599.888,
"y": -0.0681326490475206
},
{
"x": 9599.891,
"y": -0.01628844215307829
},
{
"x": 9599.894,
"y": 0.055322179708289336
},
{
"x": 9599.898,
"y": 0.07006332779704845
},
{
"x": 9599.901,
"y": 0.05492364175338597
},
{
"x": 9599.904,
"y": 0.04219567824217918
},
{
"x": 9599.907,
"y": -0.08085175059842163
},
{
"x": 9599.91,
"y": 0.006850605383823614
},
{
"x": 9599.914,
"y": -0.007227412895105713
},
{
"x": 9599.917,
"y": -0.02915529643391148
},
{
"x": 9599.92,
"y": -0.024204007680810685
},
{
"x": 9599.923,
"y": -0.05139417762298827
},
{
"x": 9599.926,
"y": 0.06255412019450789
},
{
"x": 9599.93,
"y": -0.008089310108283457
},
{
"x": 9599.933,
"y": 0.01091381434630845
},
{
"x": 9599.936,
"y": 0.10917064875433974
},
{
"x": 9599.939,
"y": 0.019095418188861853
},
{
"x": 9599.942,
"y": -0.003210524382650846
},
{
"x": 9599.946,
"y": -0.015949049420250532
},
{
"x": 9599.949,
"y": 0.0013246263138455392
},
{
"x": 9599.952,
"y": -0.014071274307454052
},
{
"x": 9599.955,
"y": -0.11719335805176721
},
{
"x": 9599.958,
"y": -0.09269164232276557
},
{
"x": 9599.962,
"y": -0.005364953606328376
},
{
"x": 9599.965,
"y": -0.009227208609757951
},
{
"x": 9599.968,
"y": -0.17667816755300036
},
{
"x": 9599.971,
"y": 0.07506805833459573
},
{
"x": 9599.974,
"y": -0.053453963801329975
},
{
"x": 9599.978,
"y": 0.05204754725245977
},
{
"x": 9599.981,
"y": 0.012770876291794521
},
{
"x": 9599.984,
"y": -0.010629520193219421
},
{
"x": 9599.987,
"y": -0.06131075738510645
},
{
"x": 9599.99,
"y": -0.025038872006185393
},
{
"x": 9599.994,
"y": -0.0852180538133898
},
{
"x": 9599.997,
"y": -0.12247371450996691
},
{
"x": 9600,
"y": 0.005012988504724961
},
{
"x": 9600.003,
"y": 1.0769277571644842
},
{
"x": 9600.006,
"y": 0.7968018539264536
},
{
"x": 9600.01,
"y": 0.26860803973603564
},
{
"x": 9600.013,
"y": -0.33118330869839563
},
{
"x": 9600.016,
"y": -0.8004897003901187
},
{
"x": 9600.019,
"y": -1.0906210245100783
},
{
"x": 9600.022,
"y": -0.8490797196599748
},
{
"x": 9600.025,
"y": -0.07266616121554292
},
{
"x": 9600.029,
"y": 0.3527967143477758
},
{
"x": 9600.032,
"y": 0.7682131134057434
},
{
"x": 9600.035,
"y": 0.9223240589828634
},
{
"x": 9600.038,
"y": 0.9188896155330686
},
{
"x": 9600.041,
"y": 0.31747361729124085
},
{
"x": 9600.045,
"y": -0.216942314203787
},
{
"x": 9600.048,
"y": -0.6349411285437848
},
{
"x": 9600.051,
"y": -0.9481138362796839
},
{
"x": 9600.054,
"y": -0.8599274695062277
},
{
"x": 9600.058,
"y": -0.46645974672561563
},
{
"x": 9600.061,
"y": 0.13472594627256812
},
{
"x": 9600.064,
"y": 0.615556108192307
},
{
"x": 9600.067,
"y": 0.9298333265610303
},
{
"x": 9600.07,
"y": 0.9354748187134693
},
{
"x": 9600.074,
"y": 0.4746215394027143
},
{
"x": 9600.077,
"y": -0.14573936536521717
},
{
"x": 9600.08,
"y": -0.5597956241709937
},
{
"x": 9600.083,
"y": -0.9334925224097692
},
{
"x": 9600.086,
"y": -0.8904856486584283
},
{
"x": 9600.09,
"y": -0.5943242382703616
},
{
"x": 9600.093,
"y": -0.07976294348851995
},
{
"x": 9600.096,
"y": 0.4829253419293723
},
{
"x": 9600.099,
"y": 0.98990824956216
},
{
"x": 9600.102,
"y": 0.9563353643807261
},
{
"x": 9600.106,
"y": 0.6313316546018426
},
{
"x": 9600.109,
"y": 0.031153123188896653
},
{
"x": 9600.112,
"y": -0.38437602282426264
},
{
"x": 9600.115,
"y": -0.9421616342689709
},
{
"x": 9600.118,
"y": -1.1153342592222932
},
{
"x": 9600.122,
"y": -0.7077218626499439
},
{
"x": 9600.125,
"y": -0.4655798159667148
},
{
"x": 9600.128,
"y": 0.34810289372924347
},
{
"x": 9600.131,
"y": 0.94070464310678
},
{
"x": 9600.134,
"y": 1.0548396333730536
},
{
"x": 9600.138,
"y": 1.0714243179371363
},
{
"x": 9600.141,
"y": 0.44225316640993945
},
{
"x": 9600.144,
"y": -0.16976097927035994
},
{
"x": 9600.147,
"y": -0.711287911182909
},
{
"x": 9600.15,
"y": -0.9782182858502313
},
{
"x": 9600.154,
"y": -0.9776561879684341
},
{
"x": 9600.157,
"y": -0.5050103682552418
},
{
"x": 9600.16,
"y": 0.013693875892709179
},
{
"x": 9600.163,
"y": 0.5217681818623522
}
]
const chart = new TimeChart(el, {
baseTime: Date.now(),
series: [
{ name: 'Line 1', data: data, color: 'blue' },
],
zoom: { x: { autoRange: true } },
tooltip: {
enabled: true,
},
renderPaddingLeft: 45,
});
</script>
The data X-axis usually has 4 decimal places
set baseTime to 9600, then substract 9600 from each x in your dataset before sending it to chart. e.g. the first x should be -0.154
The smaller the absolute value, the higher the accuracy
It works a bit, but my x-axis data volumes are usually in the millions or more
Would it be better to draw a point with WebGL
When we hit the precision limit, panning is not smooth in WebGL. So, what is the min and max X value in your data? You can also limit the zoom-in to limit the artifact. see minDomainExtent.
min:9000
max:90000
step: about 0.02
I've already tried minDomainExtent but he doesn't fit my scenario, I'll try another solution.
Thanks, it seems to be working
But,My time step is 0.032, if I set xStep to 0.032, it's around 80% correct, if I set xStep to 0.1, it's 95% correct,and if I don`t set xStep, it's 80% correct.
That's strange. I expect no visible precision loss with this patch. Can you post the code you use for testing?
OK,I'll post the code tomorrow.
My test code and test data is here .
code: demo/large_data_range_xstep0.1.html and demo/large_data_range_xstep0.032.html.
data: demo/data.js.
And When I tested it, the error usually occurs around x=14985 and zoom-in to minDomain. the error rate is higher when the x value is larger.
OK, I've checked your data. There are 2 issue:
- Your
xStepshould be 0.0032 - This optimization in #75 is based on the assumption that X values are mostly evenly distributed. Can you split your data into multiple series? I got perfect accuracy with this patch based on your branch:
diff --git a/demo/large_data_range_xstep0.032.html b/demo/large_data_range_xstep0.032.html
index 8ffccab..5db7f43 100644
--- a/demo/large_data_range_xstep0.032.html
+++ b/demo/large_data_range_xstep0.032.html
@@ -26,12 +26,22 @@
<script src="./data.js"></script>
<script>
const el = document.getElementById('chart');
+ let curSeries = null;
+ const series = [];
+ let lastX = -Infinity;
+ for (const d of data) {
+ if (d.x - lastX > 10) {
+ if (curSeries) {
+ series.push(curSeries);
+ }
+ curSeries = { name: `Run ${series.length}`, data: [], xStep: 0.0032 };
+ }
+ curSeries.data.push(d);
+ lastX = d.x;
+ }
const chart = new TimeChart(el, {
baseTime: 9599,
- series: [
- // { name: 'Line 1', data: data1, color: 'blue' },
- { name: 'Line 1', data: data, color: 'blue', xStep: 0.032, xStepCorrection: true },
- ],
+ series,
zoom: { x: { autoRange: true, minDomainExtent: 0.1, } },
tooltip: {
enabled: true,About xstep, It`s my fault, I'll make sure to set it to 0.0032. Now.
About multiple series, I can use it, but I've noticed that if I do, my tooltip will display values for multiple series and highlight multiple points. I'm not sure if there's a way to handle this later based on some property like type, or if I should try to solve it myself. I can use multiple series, but I need the tooltip to behave the same way as with single series.(PS: Maybe we should also consider not affecting the functionality of genuine multiple series)
Hi, I've fixed the tooltip to hide the out-of-range series instead of showing the stall highlight state. I also fixed an issue of inaccurate zoom origin calculation. You may try that by merging the latest master and predict-x branches.
Thanks, I`ve try the latest master and found some issues. Perhaps the problem isn`t hide the out-of-range series, but in needing tooltip and legend for only one series when the main series is split into multiple series.
There are two pic, the first one is the current one and the second one is what I need.
1.
2.
And I've simply addressed the tooltip and legend at My branch(PS. It’s already been merged from both the master and predict-x branches.) , but I'm not sure if there are any other plugins with the same issue.