D3: Umgang mit Zoom und Tooltips in einem einzigen Diagramm?

Question

Ich habe eine Visualisierung, die im Wesentlichen eine Reihe von gestapelten Balkendiagrammen ist, von denen jedes mehrere Panels enthält. Zum Beispiel sind here drei solche Balkendiagramme mit jeweils vier Panels.

Ich habe es geschafft, Schwenk/Zoom-Funktionalität zu implementieren, die über die Diagramme koordiniert wird. This ist, wie es aussieht, wenn ich zum Beispiel aus dem letzten Bild in das dritte Bild zoome. Das Zoom-Verhalten wird von einem unsichtbaren Rechteck aufgerufen, das über jedem Diagramm platziert wird.

Mein Problem ist, dass ich Tooltip-Funktionalität basierend auf dem Speicherort des Cursors des Benutzers in einem Diagramm aktivieren möchte. Da die Zoomrechtecke jedoch über den Charts liegen, werden in den eigentlichen Charts selbst keine Mausereignisse für SVG-Elemente registriert.

Des kann jemand einen Weg um dies wissen?

Answer 1

Sie können das Mausereignis wahrscheinlich auf dasselbe Rechteck setzen, das Sie zum Erkennen des Zooms verwenden. Schwer sicher zu sagen, ohne eine Codebeispiel, aber ich würde erwarten, dass Sie etwas in diese Richtung tun:

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

den „.tooltip“ zum Ereignisse hinzufügen, wird einen Namespace auf das Ereignis, so dass, wenn Sie am Ende Wenn Sie eine Kollision mit Ihren Zoom-Listenern haben, können Sie ihnen auch einen Namespace hinzufügen.

Answer 2

In Ihrem CSS legen Sie den Stil Ponter-Events: keine für Ihre Zoom Rechtecke. Auf diese Weise werden die Cursor-Ereignisse von den Elementen erfasst.