注释连接器阻止工具提示 [英] Annotation connectors blocking tooltips

问题描述

我正在创建一个线图，在使用 d3 将鼠标悬停在数据点上时会出现工具提示.但是，我在图中添加了一些注释，标注圆圈现在会阻止工具提示出现在与注释重叠的点上.

I am creating a line plot with tooltips appearing on hovering over the data points using d3. However, I added a few annotations to the plot and the callout circles now block the tooltips from appearing on the points overlapped by the annotations.

下面是出现在点上的tooltip的截图，但是没有出现在标注圈覆盖的点上(图片上的灰色圈).

The following is a screenshot of the tooltip appearing on the points, but it doesn't appear on the point overlayed by the annotation circle (grey circle on the image).

用于生成线图的代码、点、工具提示和注释如下

The code used to generate the line plot, the points, tooltip and annotations are as follows

// Create Tooltip
var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")

// Annotations
const annotations = [
    {
        type: d3.annotationCalloutCircle,
        note: {
            label: "Label",
            title: "Title",
            wrap: 500 },
        subject: { radius: 40 },
        color: ["#bdbfbf"], x: 550, y: 100, dy: -50, dx: -120
    }
]

// Add annotations to the plot
const makeAnnotations = d3.annotation()
    .type(d3.annotationLabel)
    .annotations(annotations)
d3.select("svg")
    .append("g")
    .call(makeAnnotations)

// Draw line
var line = d3.line()
    .x(function(d) { return x(+d.hour); })
    .y(function(d) { return y(+d.val); })
svg.selectAll(".line")
    .data(groupeddata)
    .enter()
    .append("path")
    .attr("fill", "none")
    .attr("stroke", function(d){ return color(d.key) })
    .attr("stroke-width", 1.5)
    .attr("d", function (d){ return line(d.values)})

// Draw points and add tooltips
svg.selectAll(".dot")
    .data(groupeddata)
    .enter()
    .append("g")
    .style("fill", function(d){ return color(d.key) })
    .selectAll(".points")
    .data(function (d){return d.values})
    .enter()
    .append("circle")
    .attr("cx", function(d) { return x(d.hour) } )
    .attr("cy", function(d) { return y(d.val) } )
    .attr("r", 5)
    .attr("stroke", "white")
    .on("mouseover", function(d){
        return tooltip.style("visibility", "visible")
            .html("<b>" + d.day + " " + d.hour + "00h" + "</b>" + "<br/>"
                + "Average Pedestrian Count : " + parseFloat(d.val).toFixed(2))})
    .on("mousemove", function(){
        return tooltip.style("top",(d3.event.pageY-10)+"px")
            .style("left",(d3.event.pageX+10)+"px")})
    .on("mouseout", function(){
        return tooltip.style("visibility", "hidden")})

推荐答案

与 HTML 相比，SVG 不使用 z-index，而只使用 HTML 中元素的顺序.较晚的节点与任何较早的节点重叠.解决问题的一种方法是调用 .raise() 在所有圈子上，因此它们位于注释之上，因此可以与之交互.

In contrast to HTML, SVG doesn't work with z-index, but just with the order of the elements in the HTML. Later nodes overlap any earlier nodes. One way to fix your issue would be to call .raise() on all circles, so they are above the annotations and can thus be interacted with.

另一个选项是检查注释圈是否有fill: none.下面的代码片段显示了第一个圆如何将悬停传递到它后面的矩形，而第二个则没有.这是因为 fill: none 从字面上删除了命中框，而 fill:transparent 不会.

Another option is to check whether the annotation circle has fill: none. The following snippet shows how the first circle passes hovers to the rect behind it, while the second one doesn't. This is because fill: none literally removes the hitbox, while fill:transparent does not.

最后一个选项是将 pointer-events: none 添加到注释中.这样，所有事件(悬停、点击、触摸、拖动等)就好像它是一个幽灵一样通过它.

A final option is to add pointer-events: none to the annotation. That way, all events (hover, click, touch, drag, etc.) just pass through it as if it were a ghost.

将鼠标悬停在以下节点上，查看它们如何触发或不触发控制台中的消息.

Hover over the following nodes and see how they do or do not trigger a message in the console.

d3.selectAll("rect")
  .on("mouseover", () => {
    console.log("HOVER");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <rect x="5" y="5" height="10" width="10"></rect>
  <circle cx="10" cy="10" r="10" stroke="black" fill="none"></circle>
  
  <rect x="45" y="5" height="10" width="10"></rect>
  <circle cx="50" cy="10" r="10" stroke="blue" fill="transparent"></circle>
  
  <rect x="85" y="5" height="10" width="10"></rect>
  <circle cx="90" cy="10" r="10" stroke="red" fill="transparent" style="pointer-events: none;"></circle>
</svg>

这篇关于注释连接器阻止工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！