D3：如何在单个图表中处理缩放和工具提示？

Posted 2023-02-22

【中文标题】D3：如何在单个图表中处理缩放和工具提示？

【英文标题】：D3: How to handle zooming and tooltips in a single chart?

【发布时间】：2016-11-04 04:39:10

【问题描述】：

我的可视化本质上是一系列堆叠的条形图，每个条形图都包含几个面板。例如，here 是三个这样的条形图，每个都有四个面板。

我已设法实现跨图表协调的平移/缩放功能。例如，This 是从最后一张图像放大到第三个面板时的样子。缩放行为是从放置在每个图表上的不可见矩形调用的。

我的问题是我想根据用户光标在绘图中的位置启用工具提示功能。但是，由于缩放矩形放置在图表顶部，因此实际图表本身中的任何 SVG 元素都不会注册鼠标事件。

有没有人知道解决这个问题的方法？

【问题讨论】：

您解决了这个问题吗？如果有，怎么做？

我也有同样的问题...希望有人能帮助我们

【参考方案1】：

我知道这为时已晚，但我刚刚找到了解决方法。对我来说，关键是向 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)  

然后稍后将我的力元素添加到 g

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

等等。 这里的一个小问题是我实际上无法用鼠标在圆圈上进行缩放，但是我有很多空白。我将尝试允许传播缩放事件，或从圆圈中调用缩放事件

【参考方案2】：

我关注Mike Bostock's example，就像你在我的整个图表上放置一个rect，然后在其上调用缩放行为，就像你发现它正在消耗所有指针事件一样。

我在这里找到了一个 example，它似乎达到了我想要的效果，我发现如果我废弃 rect 并直接调用 svg 元素上的缩放行为 ，我仍然得到子元素的指针事件。

我是这里的菜鸟，我真的不明白为什么会这样。我也猜想这可能有它自己的后果，例如我想这会阻止您限制鼠标事件导致缩放的图形区域。您可能会注意到我链接的示例创建了一个 sub-svg;我不知道，但也许这是为了解决这个问题。

【参考方案3】：

在您的 CSS 中，为您的缩放矩形添加样式 ponter-events:none。这样，光标事件将被元素所感知。

【讨论】：

感谢您的回答。问题是我需要缩放矩形来注册指针事件。它们的全部目的是在用户将光标放在图表上并进行页面滚动时触发缩放行为。因此，虽然设置 pointer-events: none 允许以下元素感知鼠标事件，但它会破坏缩放功能。

@tddevlin 我遇到了同样的问题，有什么解决办法吗？

【参考方案4】：

您可以将 mouseevent 放在用于检测缩放的同一矩形上。没有代码示例很难确定，但我希望您可以按照以下方式做一些事情：

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

向事件添加“.tooltip”会为事件添加一个命名空间，因此如果您最终与缩放侦听器发生任何冲突，您也可以向它们添加命名空间。