D3.js div在svg中阻止鼠标悬停事件_D3.js

D3.js div在svg中阻止鼠标悬停事件

d3.js

D3.js div在svg中阻止鼠标悬停事件,d3.js,D3.js,如果我使用d3.js创建一个简单的散点图，我可以通过在控制台上打印“嘿”来记录圆圈元素上的mouseover事件：当svg后面的背景中有一个div时，有没有办法注册“mouseover”事件？元素的位置会干扰您对鼠标事件的预期，特别是，您需要将SVG的位置设置为绝对，并使其显示在div前面如果您希望SVG仅“捕获”某些元素上的事件，请将SVG上的指针事件设置为none，并将要接收事件的元素上的all。是，将指针事件设置为none：谢谢！如果我也想在后台div中接收指针事件呢？这会影响它吗？

如果我使用d3.js创建一个简单的散点图，我可以通过在控制台上打印“嘿”来记录圆圈元素上的

mouseover

事件：

当svg后面的背景中有一个div时，有没有办法注册“mouseover”事件？

元素的位置会干扰您对鼠标事件的预期，特别是，您需要将SVG的

位置设置为绝对
，并使其显示在div
前面
如果您希望SVG仅“捕获”某些元素上的事件，请将SVG上的指针事件设置为none
，并将要接收事件的元素上的all
。
是，将指针事件设置为none
：谢谢！如果我也想在后台div中接收指针事件呢？这会影响它吗？是的，你不会以这种方式得到任何指针事件——如果你想两者都接收事件，请将div
放在背景中。啊，我明白你的意思了——定位干扰了这一点，如果在SVG上将position
设置为absolute
，它也可以工作：您可能必须在SVG上将指针事件设置为none
，在圆圈上设置为all。
<!DOCTYPE html>
<meta charset="utf-8">
<div class="chart" style="position: aboslute; left: 0px: top: 0px; width: 300px; height: 200px;" ></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var xVals = [4, 8, 15, 16, 23, 42,72];
    var yVals = [13, 49, 34, 2, 22, 23, 44];

    var data = xVals.map(function(d,i) { return [d, yVals[i]]; });

    var width=300;
    var height=200;

    console.log('data:', data);

    /*
    var div = d3.select(".chart").append("div")
    .style("position", "absolute")
    .style("width", width + "px")
    .style("height", height + "px")
    .style("left", 0 + "px")
    .style("top", 0  + "px")
    .style("opacity", 0.2);
    */ 

    var svg = d3.select(".chart")
    .append("svg")

    svg.selectAll('circle')
    .data(data)
    .enter()
    .append("circle")
    .attr('cx', function(d) { return d[0]; })
    .attr('cy', function(d) { return d[1]; })
    .attr('r', 4)
    .attr('fill', 'black')
    .on('mouseover', function(d) { console.log('hey'); });

</script>

<!DOCTYPE html>
<meta charset="utf-8">
<div class="chart" style="position: aboslute; left: 0px: top: 0px; width: 300px; height: 200px;" ></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var xVals = [4, 8, 15, 16, 23, 42,72];
    var yVals = [13, 49, 34, 2, 22, 23, 44];

    var data = xVals.map(function(d,i) { return [d, yVals[i]]; });

    var width=300;
    var height=200;

    console.log('data:', data);

    var div = d3.select(".chart").append("div")
    .style("position", "absolute")
    .style("width", width + "px")
    .style("height", height + "px")
    .style("left", 0 + "px")
    .style("top", 0  + "px")
    .style("opacity", 0.2);

    var svg = d3.select(".chart")
    .append("svg")

    svg.selectAll('circle')
    .data(data)
    .enter()
    .append("circle")
    .attr('cx', function(d) { return d[0]; })
    .attr('cy', function(d) { return d[1]; })
    .attr('r', 4)
    .attr('fill', 'black')
    .on('mouseover', function(d) { console.log('hey'); });

</script>