下の要素にD3のツールチップを表示する方法は？

Question

D3のツールチップを使用して1つの円にバブルしたいと考えています。しかし、円は他の透明な要素で覆われています。カバー要素を削除すると、ツールチップが正常に機能します。カバー要素を保持している場合、ツールチップをどのように動作させるのですか？

ここにある例はhttp://jsfiddle.net/ncHm4/5/です。

例では、緑色の円の下にあるため、オレンジ色の円はトリガーできません。私は2つの順序を切り替えると、ツールチップがトリガーされます。オレンジ色の円をトリガーするにはどうすればいいですか？

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>