5

D3.jsでは、他のオブジェクトの前に描画されたオブジェクトが、マウスオーバーリスナーから見えなくなるように見えます。これに対する回避策はありますか？

この作業例を参照してください。

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <script type="text/javascript" src="scripts/d3.v3.js"></script>
</head>
<body>
    <div id="viz"></div>
    <script type="text/javascript">

    d3.select("body").style("background-color", "black");

    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 400)
        .attr("height", 200);

    sampleSVG.append("circle")
        .style("fill", "grey")
        .style("stroke-width", 2)
        .attr("r", 60)
        .attr("cx", 150)
        .attr("cy", 100)
        .on("mouseover", function(){d3.select(this).style("fill", "red");})
        .on("mouseout", function(){d3.select(this).style("fill", "grey");});

    sampleSVG.append("circle")
        .style("stroke", "yellow")
        .style("opacity", 0.5)
        .style("stroke-width", 2)
        .attr("r", 100)
        .attr("cx", 250)
        .attr("cy", 100)

    </script>
</body>
</html>
4

1 に答える 1

5

解決策は、「。style（ "pointer-events"、 "none"）;」を追加することです。最後の円の場合：

sampleSVG.append("circle")
    .style("stroke", "yellow")
    .style("opacity", 0.5)
    .style("stroke-width", 2)
    .attr("r", 100)
    .attr("cx", 250)
    .attr("cy", 100)
    .style("pointer-events", "none");

これが実際の例ですhttp://tributary.io/inlet/5215694

注：大きい方の円の塗りつぶし属性が「none」に設定されている場合、「pointer-events」をnoneに設定しなくても、この例は期待どおりに機能します。

于 2013-03-21T19:01:37.533 に答える