D3: How to handle zooming and tooltips in a single chart?

d3.zoom is not a function
d3 tooltip
d3 v3 zoom
d3 zoomable tree

I have a visualization that is essentially a series of stacked bar charts, each of which contains several panels. For example, here are three such bar charts, each with four panels.

I have managed to implement pan/zoom functionality that is coordinated across the charts. This is what it looks like if I zoom into the third panel from the last image, for example. The zoom behavior is called from an invisible rectangle that is placed over each chart.

My problem is that I want to enable tooltip functionality based on the location of the user's cursor within a plot. Since the zoom-rectangles are placed on top of the charts, however, no mouse events are registered for any SVG elements in the actual charts themselves.

Des anyone know a way around this?

I was following Mike Bostock's example, and like you placing a rect across my whole chart and then calling the zoom behaviour on that, and like you found that it was consuming all the pointer events.

I found an example here that seemed to be achieving what I wanted, and I found that if I scrap the rect and just call the zoom behaviour on the svg element directly, I still get pointer events for the child elements.

I'm a noob here, I don't really understand why this works. I also guess this might have its own ramifications e.g. I guess this stops you limiting the area of your graphic in which mouse events cause a zoom. You may notice that the example I linked creates a sub-svg; I don't know, but perhaps this is to solve that problem.

Zoom with Tooltip / D3 / Observable, Zoom with Tooltip If the zoom behavior is applied to the container of chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); D3.js allows to easily add a tooltip to any element of your chart. The idea is always the same: triggering a function when the user mouseover, mousemove or mouseleave the element. See the 3 examples below showing how to apply this technique to a single circle, how to customize the tooltip content, and how to apply it to data.

You can probably put the mouseevent on the same rectangle you are using for detecting your zoom. Hard to say for sure without a code sample, but I would expect you can do something along these lines:

 svg.select("rect.overlay")
     .on("mouseover.tooltip", function() { tooltip.style("display", null); })
     .on("mouseout.tooltip", function() { tooltip.style("display", "none"); })
     .on("mousemove.tooltip", mousemoveFunc);

Adding the ".tooltip" to the event adds a namespace to the event, so if you end up having any collision with your zoom listeners, you can add a namespace to them too.

Interactive Charts with D3.js, How to add tooltips on a d3.js plot: setting up, customizing, positioning and more. Explanation and reproducible code. Hovering over a bar triggers a tooltip that explains what the bar is, a few example tasks, and how many tasks fit into the bin. The tooltip even has a bar that shows what percent of the work was done by developers. Showing a chart within a tooltip can help users dive even further into a dataset, letting them explore additional metrics.

In your css put the style ponter-events:none for your zooming rectangles. That way the cursor events will be sensed by the elements blow.

Building tooltips with d3.js, Notes: Select a zone to zoom on it (X axis only). Double click to unzoom. A clipPath is used to avoid displaying the circle outside the chart area. all(brush.​move  Multi Line: Multiseries line chart with mouseover tooltip. As you can see, the functionality of the two tooltips are different. The Single Line tooltip jumps from each data point whereas the Multi Line continually follows the chart path. I want to change the Multi Line functionality to mimic how the Single Line tooltip works. Any help would be

I know this is way too late, but I've just figured out a workaround. For me the crucial thing is order of adding bits to the svg.

svg1.append("rect")//put the rectangle for zoom events on the bottom
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.call(d3.zoom()
    .scaleExtent([0.5, 10])
    .on("zoom", zoomed));

var g = svg1.append("g"); //add g element for visualisation (above the rectangle).

function zoomed() { //zoom around the g's (g has to be before this, but after the rectangle)
g.attr("transform", d3.event.transform)  
}

Then a little bit later on add my force elements to the g

 var nodes = g.append("g")
    .attr("class", "nodes")
    .selectAll("circles")
    .attr('id', function(d) {
        return d.n_id
    })

etc. Slight issue here is I can't actually zoom with my mouse over the circles, but I have loads of white space. I'm going to try and allow propagation of zoom events, or call zoom events from the circles

Zooming in d3.js, District with tooltip and Pan Zoom { d3.select('g').attr('transform', d3.event.​transform) }); var svg = d3.select('#chart') .append('svg') .attr('width',  Cooperative Brushing and Tooltips in D3. Sat 23 November 2013. Both brushes and tooltips can be an important part of creating dynamic D3 visualizations. This post is going to give an example of how to use both cooperatively, with a solution inspired by Mike Bostock's remarks here.

District with tooltip and Pan Zoom - bl.ocks.org, Here we are to continue building our scalable plot with D3.js and HTML Canvas. the drawing function would be called just one time when the plot was rendered. d3-zoom module which provides the necessary functions to handle zoom and like to add to the scatterplot like box zooming and some tooltips to allow users​  The following post is a portion of the D3 Tips and Tricks document which it free to download. To use this post in context, consider it with the others in the blog or just download the pdf and / or the examples from the downloads page:-)

Zoom and Panning with D3.js and canvas - XOOR, zoom.type = "drag" and tooltips not working together #2501 graph is the right graph let list_of_children = d3.select(graphFocused).node(). The solution is effectively to create a tooltip div within our code, then attach the appropriate mouseover, mousemove, and mouseout event functions to each of our bar chart divs to appropriately show/hide our custom tooltip div. When the tooltip is shown, we can easily grab the data we want to actually display as the text.

zoom.type = "drag" and tooltips not working together · Issue #2501 , Bromley · Browser usage plurality · Brush · Brush Handles · Brush Snapping · Brush Building a lightweight, flexible D3.js dashboard · Building a tree diagram D3 World Maps: Tooltips, Zooming, and Queue · D3-Builder · d3-comparator: sort How to get a significant correlation value by moving just one point around​  Silverlight Toolkit charts don't seem to have been designed to be able to extend for zooming. There are no hooks that you could easily attack some zooming logic to, if you want to create zooming on them, you have to go much deeer. The simplest way of implementing zooming is using ScaleTransform and RenderTransform to elements.

Comments
  • Did you solve this issue? If so, how?
  • I have exactly the same issue here...hope someone can help us out
  • Thanks for your answer. The problem is that I need the zoom-rectangles to still register pointer events. Their whole purpose is to trigger zoom behavior when the user places their cursor over the chart and does a page scroll. So while setting pointer-events: none allows the below elements to sense mouse events, it breaks the zoom functionality.
  • @tddevlin i have stuck in the same issue, is there any solution?