Zoom and subchart do not work together

[typingtanuki]

Description

In C3 zooming using the mouse wheel would update the subchart greay area to reflect the zoomed area. Also selecting an area in the subchart will prevent mouse wheel zoom to work until a tooltip pops up.

Steps to check or reproduce

• Open the following sample: https://codepen.io/anon/pen/vWdoLY
  • Select an area in the subchart
  • Move mouse in the chart area without triggering any tooltip and roll the mouse wheel
    • → No zoom will occur
  • Move the mouse in the chart until a tooltip shows up and roll the mouse wheel again
    • → Zoom will occur but the grey area in the subchart will not update
  • Use the "left click + move mouse left/right" to move the chart
    • → Chart will move but the grey area in the subchart will not follow

[netil]

C3 depends on D3 v3.x and billboard.js depends on D3 v4+, which has changed a lot without the backward compatibility. The zooming functionality depends on D3's zoom API which doesn't behave exactly same as v3.x.

I'll try look what can be done, but it could take time to solve. Because the conversion of zoom API from v3 to v4 was the hardest one.

[jmijmi]

Thank you for your work! With some improvements this may become most popular chart drawing module.

+1 for this functionality. Actually ,this is the only reason why I can not use this module in the production.

[irislieuw]

+1 for this fix!

I'd also like to point out that resizing does not update the grey area in the subchart as well!

Thanks for the awesome work!

[brattpurrie]

+1

[nirmal93guna]

+1 Facing a similar issue. Had to disable zoom in Main chart, when sub chart is enabled, as a workaround.

[ebencollins]

+1 My use case involves a time series chart that allows the user to pan/zoom on the data. While this is possible with just the subchart, it feels far more natural to drag and scroll on the chart directly while having the subchart there as more of a "minimap" or large adjustments.

[jimmy764]

+1