D3:如何处理单个图表中的缩放和工具提示

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

本文关键字：缩放 工具提示 单个图 何处理 处理 D3      更新时间：2023-09-26

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

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

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

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

我遵循Mike Bostock的例子，就像你在我的整个图表上放置一个rect，然后调用缩放行为，就像你发现它正在消耗所有的指针事件。

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

我是一个新手，我真的不明白为什么这工作。我也猜想这可能有它自己的分支，例如，我猜想这可以阻止你限制鼠标事件导致缩放的图形区域。您可能注意到，我链接的示例创建了一个子- svg;我不知道，但也许这是解决问题的办法。

在你的css中为你的缩放矩形设置ponter-events:none样式。这样，光标事件将被元素blow感知。

您可以将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);

添加"。"工具提示"为事件添加了一个名称空间，因此，如果您最终与缩放侦听器发生任何冲突，您也可以为它们添加名称空间。

我知道这太迟了，但我刚刚想出了一个解决办法。对我来说，关键的事情是向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
    })

等。这里有一个小问题，我不能用鼠标在圆圈上缩放，但我有很多空白。我将尝试允许缩放事件的传播，或者从圆圈

中调用缩放事件
相关文章：