Problem of tooltip points offset like #60

[alvins7]

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

[huww98]

That offset is random, it can change if you pan X direction. Does the baseTime option solve your problems?

[alvins7]

I tried baseTime but got nothing, maybe my usage is wrong, here is my code and data demo
`

<title>TimeChart Demo (Large data range)</title>

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>

`

[alvins7]

The data X-axis usually has 4 decimal places

[huww98]

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

[huww98]

The smaller the absolute value, the higher the accuracy

[alvins7]

It works a bit, but my x-axis data volumes are usually in the millions or more

[alvins7]

Would it be better to draw a point with WebGL

[huww98]

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.

[alvins7]

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.

[huww98]

Please try #75 , and provide your feedback, thanks.

[alvins7]

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.

[huww98]

That's strange. I expect no visible precision loss with this patch. Can you post the code you use for testing?

[alvins7]

OK,I'll post the code tomorrow.

[alvins7]

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.

[huww98]

OK, I've checked your data. There are 2 issue:

1. Your xStep should be 0.0032
2. This optimization in predict x to increase WebGL accuracy #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,