第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

svg 元素可以觸發(fā) svg 元素的點擊事件嗎？

svg 元素可以觸發(fā) svg 元素的點擊事件嗎？

梵蒂岡之花 2022-09-23 09:59:46
新手問題在這里。我想知道是否有可能觸發(fā)其下方元素（路徑，圓圈等）的“點擊”事件，如果它們覆蓋了鼠標坐標？最好在打字稿中通過使用d3.js庫。例如，考慮有兩個圓圈（一個小圓圈在 z 位置上比一個大圓圈大），并且在單擊時都顯示一條消息。我希望如果我在小圓圈內(nèi)單擊，則會出現(xiàn)其消息，然后也會顯示較大圓圈的消息。以下是我的例子[編輯：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消息。單擊小圓圈將顯示內(nèi)部和SVG消息，但我希望具有內(nèi)部，外部和SVG序列。[編輯：糾正了“傳播”一詞的誤用]我將元素的“指針事件”屬性設置為“all”。我知道這使它們“非傳遞”，但我希望能夠觸發(fā)它們的事件，并觸發(fā)它們下面的元素的事件。或者，是否有任何好的方法可以獲得覆蓋給定坐標[X，Y]的svg元素列表（可以通過獲得），以便可以手動觸發(fā)它們各自的點擊事件？d3.mouse感謝您的幫助。
查看完整描述

2 回答

?
楊__羊羊

TA貢獻1943條經(jīng)驗 獲得超7個贊

首先，此解決方案使用您在 HTML 中引用的 D3 v5，而不是 D3 v2（已有 9 年歷史）。

回到你的問題，你說：

我希望能夠觸發(fā)它們的事件并傳播到它們下面的元素，直到SVG本身被觸發(fā)。

好吧，這不是傳播的意思。冒泡意味著在DOM樹中上升，但這些圓圈不是父/子，它們只是兄弟姐妹。因此，你想要的與傳播無關，所以我們需要一種不同的方法。

我在這里建議的方法使用 ，獲取您單擊的坐標下的所有元素，并結(jié)合用于調(diào)度單擊（我在這里找到了該函數(shù)，并對其進行了修改以用于 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>


查看完整回答
反對 回復 2022-09-23
?
烙印99

TA貢獻1829條經(jīng)驗 獲得超13個贊

解決方案將取決于控制 svg 元素大小的形狀類型和參數(shù)。如果需要非最優(yōu)但通用的解決方案，可以使用元素的邊界框。使用邊界框，可以通過針對 [x，y] 目標測試 x 和 y 范圍來確定是否有任何對象超過 [x，y]。


您可以優(yōu)化以下代碼并將其插入到任何 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

})


查看完整回答
反對 回復 2022-09-23
  • 2 回答
  • 0 關注
  • 504 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號