新手问题在这里。我想知道是否有可能触发其下方元素（路径，圆圈等）的“点击”事件，如果它们覆盖了鼠标坐标？最好在打字稿中通过使用d3.js库。例如，考虑有两个圆圈（一个小圆圈在 z 位置上比一个大圆圈大），并且在单击时都显示一条消息。我希望如果我在小圆圈内单击，则会出现其消息，然后也会显示较大圆圈的消息。以下是我的例子[编辑：D3的更改版本]的HTML代码：<!DOCTYPE html><style> circle { fill: lightgreen; stroke: #000; }</style><body><script src="https://d3js.org/d3.v5.min.js"></script>以下是相关的脚本：var svg = d3.select("body").append("svg") .style("float", "left") .attr("width", 480) .attr("height", 480) .attr('pointer-events', 'all') .on("click", log("SVG"));svg.append("circle") .attr('pointer-events', 'all') .attr("cx", 240) .attr("cy", 240) .attr("r", 200) .on("click", log("OUTER"));svg.append("circle") .attr('pointer-event', 'all') .attr("cx", 240) .attr("cy", 240) .attr("r", 100) .on("click", log("INNER"));var div = d3.select("body").append("div") .style("float", "left");function log(message) { return function() { div.append("p") .text(message) .style("background", "#ff0") .transition() .duration(2500) .style("opacity", 1e-6) .remove(); };}通过此代码，单击大圆圈将显示外部和SVG消息。单击小圆圈将显示内部和SVG消息，但我希望具有内部，外部和SVG序列。[编辑：纠正了“传播”一词的误用]我将元素的“指针事件”属性设置为“all”。我知道这使它们“非传递”，但我希望能够触发它们的事件，并触发它们下面的元素的事件。或者，是否有任何好的方法可以获得覆盖给定坐标[X，Y]的svg元素列表（可以通过获得），以便可以手动触发它们各自的点击事件？d3.mouse感谢您的帮助。
2 回答
杨__羊羊
TA贡献1943条经验 获得超7个赞
首先，此解决方案使用您在 HTML 中引用的 D3 v5，而不是 D3 v2（已有 9 年历史）。
回到你的问题，你说：
我希望能够触发它们的事件并传播到它们下面的元素，直到SVG本身被触发。
好吧，这不是传播的意思。冒泡意味着在DOM树中上升，但这些圆圈不是父/子，它们只是兄弟姐妹。因此，你想要的与传播无关，所以我们需要一种不同的方法。
我在这里建议的方法使用 ，获取您单击的坐标下的所有元素，并结合用于调度单击（我在这里找到了该函数，并对其进行了修改以用于 D3）。最后，我需要标志，因为指针事件设置为 的元素被 忽略（顺便说一句，它是 ，不是）。elementFromPointd3.dispatchgetAllElementsclickednoneelementFromPointpointer-eventspointer-event
这是演示：
let clicked;
var svg = d3.select("body").append("svg")
.style("float", "left")
.attr("width", 480)
.attr("height", 480)
.attr('pointer-event', 'all');
svg.append("circle")
.attr('pointer-event', 'all')
.attr("cx", 240)
.attr("cy", 240)
.attr("r", 200)
.on("click", function() {
if (!clicked) return;
log("OUTER")
});
svg.append("circle")
.attr('pointer-event', 'all')
.attr("cx", 240)
.attr("cy", 240)
.attr("r", 100)
.on("click", function() {
if (!clicked) return;
log("INNER")
});
var div = d3.select("body").append("div")
.style("float", "left");
function log(message) {
div.append("p")
.text(message)
.style("background", "#ff0")
.transition()
.duration(2500)
.style("opacity", 1e-6)
.remove();
}
d3.select("svg").on("click", function() {
clicked = true;
getAllElements(...d3.mouse(this));
log("SVG")
clicked = false;
function getAllElements(x, y) {
const elements = [];
let thisElement = document.elementFromPoint(x, y);
while (thisElement && thisElement.nearestViewportElement) {
elements.push(thisElement);
d3.select(thisElement).style("display", "none");
thisElement = document.elementFromPoint(x, y);
}
elements.forEach(function(elm) {
d3.select(elm).style("display", null)
.dispatch("click");
});
};
})
<!DOCTYPE html>
<style>
circle {
fill: lightgreen;
stroke: #000;
}
</style>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
烙印99
TA贡献1829条经验 获得超13个赞
解决方案将取决于控制 svg 元素大小的形状类型和参数。如果需要非最优但通用的解决方案，可以使用元素的边界框。使用边界框，可以通过针对 [x，y] 目标测试 x 和 y 范围来确定是否有任何对象超过 [x，y]。
您可以优化以下代码并将其插入到任何 d3 功能块中：
<d3 function block>((shape)=>{
let bbox = this.getBBox();
let minX=bbox.x;
let maxX=minX+bbox.width;
let minY=bbox.y;
let maxY=minY+bbox.width;
let isOver=shape.x>minX && shape.x < maxX && shape.y > minY && shape.y < maxY;
//..do something depending on the value of isOver
})
添加回答
举报
0/150
提交
取消