C3: zoom.type = "drag" and tooltips not working together

Created on 8 Oct 2018 · 5Comments · Source: c3js/c3

To reproduce go to the https://c3js.org/samples/interaction_zoom.html and change:

    zoom: {
        enabled: true,
        type: "drag"
    }

After that note that tooltips are no longer displayed when hovering over data points.

C-bug

Source

vmihailenco

👍11

Most helpful comment

Is there an opportunity to fix it in the near future?

Joanna-Szczesna on 13 Jan 2019

👍4

All 5 comments

Is there an opportunity to fix it in the near future?

Joanna-Szczesna on 13 Jan 2019

👍4

The bug still exists, any work around for it?

tahatariq on 24 Feb 2019

the problem is due to the structure of the created svg,
zoom drag creates a group with class c3-drag-zoom after the group containing the regions, grids, chart, etc
the rectangle in the group catches all events so that the tooltip event never fires.

I have no idea how to change that behaviour. As a workaround, I use a modifier key on mouse over on the svg to change the order of the nodes so that I can toggle between zoom or tooltip (that could be done with a button or anything really)

code sample:
c3.generate -> oninit

oninit: function () { this.svg.on('mouseover', function () {graphFocused = this}) }

after graph creation:

d3.select("body").on('keydown', function (e) {
   if (d3.event.keyCode === 16) { // toggle on Shift down
      if(graphFocused) { // TODO add check to ensure focused graph is the right graph
         let list_of_children = d3.select(graphFocused).node().childNodes;
         list_of_children[2].parentNode.insertBefore(list_of_children[2], list_of_children[1]);
         d3.select(d3.select(graphFocused).node().parentNode).selectAll(".c3-tooltip-container").style("display", "none"); // hides tooltip div, TODO hide tooltip line in svg if exists
         }
      }
  })