如何使 D3 工具提示显示在底部元素上？

Question

我想使用 D3 工具提示在一个圆圈上冒泡。 但是，圆圈​​被其他透明元素覆盖。 如果我删除覆盖元素，工具提示工作正常。 如果我保留覆盖元素，如何使工具提示起作用？

一个例子是http://jsfiddle.net/ncHm4/5/ 。

在示例中，橙色圆圈无法触发，因为它位于绿色圆圈下方。 如果我切换两者的顺序，则会触发工具提示。 如何在将橙色圆圈保持在底部的同时触发它？

var canvas = d3.select("body")
        .append("svg")
        .attr("width",1004)
        .attr("height",804);

var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);


var circleOrange = canvas.append("circle")
         .attr("cx", 230)
         .attr("cy", 85)
         .attr("r", 20)
         .attr("fill", "orange") 
         .attr("stroke-width", 5)
         .attr("stroke", "orangered")
         .attr('pointer-events', 'all')
        .on('mouseover', mouseover)
        .on('mouseout', mouseout);

var circleGreen = canvas.append("ellipse")
          .attr("transform", "translate(618,175)rotate(37)scale(1)")    
                  .attr("cx", 11)
                  .attr("cy", 215)
                  .attr("rx", 495)
                  .attr("ry", 225)
                  .style("fill", "green")
                  .style("fill-opacity", ".5");     



function mouseover(d) {
    tooltip.html("hello")
    .style("left", (d3.event.pageX + 10) + "px")
    .style("top", (d3.event.pageY - 10) + "px")
    .style("opacity", 1);
};

function mouseout(d) {      
    tooltip.style("opacity", 0);
}

Answer 1

试试看：我在绿色圆圈上添加了另一种样式，如.style("pointer-events", "none")

 var canvas = d3.select("body") .append("svg") .attr("width", 1004) .attr("height", 804); var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); var circleOrange = canvas.append("circle") .attr("cx", 230).attr("name", "cir") .attr("cy", 85) .attr("r", 20) .attr("fill", "orange") .attr("stroke-width", 5) .attr("stroke", "orangered") .attr('pointer-events', 'all') .on('mouseover', mouseover) .on('mouseout', mouseout); var circleGreen = canvas.append("ellipse") .attr("transform", "translate(618,175)rotate(37)scale(1)") .attr("cx", 11) .attr("cy", 215) .attr("rx", 495) .attr("ry", 225) .style("fill", "green").style("pointer-events", "none") .style("fill-opacity", ".5"); function mouseover(d) { tooltip.html("hello") .style("left", (d3.event.pageX + 10) + "px") .style("top", (d3.event.pageY - 10) + "px") .style("opacity", 1); }; function mouseout(d) { tooltip.style("opacity", 0); }

 body { font: 10px sans-serif; } div.tooltip { position: absolute; /*very important*/ text-align: left; padding: 5px 10px 5px 10px; font: bold 11px sans-serif; color: black; background: yellow; border-radius: 8px; pointer-events: none; } /* do this or append circles AFTER appending recs */ rect { pointer-events: none; } .axis line, .axis path { fill: none; stroke: #000; shape-rendering: crispEdges; } .arrow { stroke: #000; stroke-width: 1.5px; } .outer, .inner { shape-rendering: crispEdges; } .outer { fill: none; stroke: #000; } .inner { fill: transparent; stroke: #000; stroke-dasharray: 3, 4; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>