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

Question

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

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

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

有没有人知道这方面的方法？

Answer 1

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

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

我在这里是个菜鸟，我真的不明白为什么会这样。我也猜测这可能有其自身的影响，例如：我想这可以阻止你限制鼠标事件导致缩放的图形区域。您可能会注意到我链接的示例创建了一个子svg;我不知道，但也许这就是解决这个问题。

Answer 2

您可以将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”添加到事件会为事件添加命名空间，因此如果最终与缩放侦听器发生冲突，您也可以向它们添加命名空间。

Answer 3

在你的css中为你的缩放矩形放置样式指针 - events：none。这样，光标事件将被元素打击感知。

Answer 4

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

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