[bug] Line: flow() breaks (drag-)Zoom

[adschm]

I show historic timeseries data and then add "live" data points by using .flow() function to append the latest datapoint to that view. As soon as .flow() is executed the first time, drag-zoom is broken. (Before the first trigger is executed, everything works fine.)

Sometimes it's starting to work again after some time or a few tries, but this is not reproducible (whereas the broken zoom is).

A simple example is found here:
https://jsfiddle.net/adschm/2t0ao5h4/18/

Just try to drag-zoom. Setting refresh variable to false will produce a zoomable plot.

Chromium-based console gives me the following (transition id varies) for each unsuccessful click:

Uncaught Error: transition 837 not found
    at vo (d3.v6.min.js:2)
    at Pn.zn.transition (d3.v6.min.js:2)
    at AxisRendererHelper.transitionise (billboard.custom.js:9434)
    at SVGGElement.<anonymous> (billboard.custom.js:9519)
    at ji.each (d3.v6.min.js:2)
    at AxisRenderer.create (billboard.custom.js:9510)
    at billboard.custom.js:10216
    at Array.forEach (<anonymous>)
    at Axis.redraw (billboard.custom.js:10213)
    at Axis.redrawAxis (billboard.custom.js:10253)

vo	@	d3.v6.min.js:2
zn.transition	@	d3.v6.min.js:2
transitionise	@	billboard.custom.js:9434
(anonymous)	@	billboard.custom.js:9519
each	@	d3.v6.min.js:2
create	@	billboard.custom.js:9510
(anonymous)	@	billboard.custom.js:10216
redraw	@	billboard.custom.js:10213
redrawAxis	@	billboard.custom.js:10253
redraw	@	billboard.custom.js:5382
zoom	@	billboard.custom.js:16477
(anonymous)	@	billboard.custom.js:17306
call	@	d3.v6.min.js:2
e	@	d3.v6.min.js:2
g	@	d3.v6.min.js:2
(anonymous)	@	d3.v6.min.js:2

[netil]

Hi @adschm, thanks for the report. I'll check the issue.

[adschm]

BTW: Is there a simpler function available to "just append data" (to an existing series)? I only use .flow() here because I didn't find anything else, but I do not need all the additional animation handles ...

[netil]

@adschm, to simply load data dynamically, use .load() instead of .flow().

[adschm]

The way I understand .load() is that it replaces data when I specify an already existing data id?

My problem is that my first DB query for the data is typically expensive, so I don't want to re-query or concatenate data more often than necessary.

How would I change my referenced example to achieve the same result by using load?

[netil]

@adschm for dynamic data loading, checkout the wiki doc.

• https://github.com/naver/billboard.js/wiki/How-behaves-for-dynamic-loading%3F

And for appending data, you need handle data to be displayed separately.

// 1) initial data
var data = [
      ["x", '2021-01-01T08:00:00', '2021-01-01T15:00:00', '2021-01-02T12:00:00', '2021-01-02T23:00:00', '2021-01-03T03:00:00', '2021-01-04T12:00:00', '2021-01-05T21:00:00'],
      ["sample2", 12, 64, 23, 75, 36, 30, 24]
    ];

var chart = bb.generate({
    data: {
        columns: data
    }, 
    ...
};

// 2) when need to append data, just handle it as your needs
data[0].push('2021-02-01T08:00:00');
data[1].push(37);

// 3) then, use updated data
chart.load({columns: data});    

[adschm]

@netil Thanks for packaging append, it seems to work from a quick test and resolves my specific use-case.

However, does this actually fix the reported issue, i.e. zoom broken after flow()? If drag-zoom does not make sense during flow(), it should be disabled in this case. Otherwise, it should be fixed properly, IMO.
Probably, this should be reopened until flow() + zoom is dealt with.

[netil]

However, does this actually fix the reported issue, i.e. zoom broken after flow()? If drag-zoom does not make sense during flow(), it should be disabled in this case.

Doing some interaction during the middle of the transition, will eventually make an unexpected behavior or result.
Maybe adding some prevention to not interact is needed.

[netil]

doing drag after the .flow() will not throw error.