Dynamic timeline xDomain

[echo66]

Greetings!

How can I change the xDomain of a timeline, after adding it to the DOM? I tried something like:

graph.xDomain([0, 1000]) graph.update()

but it still mantains the same domain interval.

[echo66]

So, after studying the events log in the inspector console and the code in the es6 implementation of timeline.js, it seems that there is a possible hack to implement what I need. When I use the zoomer, each mouse event object has the following fields: anchor, delta and factor. If I change the values for F, dX, dY and A in the following code:

graph.xZoom({ 
    anchor: A,
    delta: {
        x: dX,
        y: dY
    },
    factor: F
})
graph.update()
axis.call(xAxis)

I can see a different timeline domain. Unfortunately, I'm still trying to interpret each parameter...

[b-ma]

Hey, I have to confess I'm not sure about what you are trying to achieve here. If you want to programmatically change the xDomain of the timeline, the most straightforward would be to do the following:

graph.xScale.domain([0, 5000]);
graph.update();

If you want to use the zoomerin your project, you have an example of how to do that here: http://wavesjs.github.io/examples/01-ui-what-you-can-do-with-it.html#-ui-what-you-can-do-with-it-5-add-the-zooming-ability-to-the-whole-timeline

Hope it answers your question

[echo66]

Thanks! Problem solved! :+1:

Closing issue now

[echo66]

One additional note: if you are using a zoomer, you need to add the following instruction:

axis.call(xAxis)

or the next time you use the zoomer, it will return to the previous xDomain / zoom level.

[b-ma]

Thanks for the precision, it is actually done in the example of the zoomer use. Nice to hear your problem is solved.