Question

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

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

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")

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何在底部元素上显示D3 Tooltip？

1 个答案: