gpt4 book ai didi

javascript - 如何访问选择的 parentNode 以引发元素?

转载 作者:IT王子 更新时间:2023-10-29 03:10:07 25 4
gpt4 key购买 nike

我创建了以下文档:

<g>
<path class=​"line" name=​"gene_1" stroke=​"#aec7e8" d=​"M10.47...">​</path>​
<path class=​"line" name=​"gene_2" stroke=​"#aec7e8" d=​"M10.47...">​</path>​
<path class=​"line" name=​"gene_3" stroke=​"#aec7e8" d=​"M10.47...">​</path>​
...
</g>

当我将鼠标悬停在每条路径上时,我想将其最后添加到 svg:g 中所以它出现在其他行的顶部,但我不知道如何正确选择 parentNode :

function onmouseover(d, i){
var current_gene_name = d3.select(this).attr("name"),
current_gene_pcp = d3.select(".line[name=" + current_gene_name + "]");

p1 = this.parentNode

p2 = current_gene_pcp[0].parentNode

p3 = current_gene_pcp[0][0].parentNode

//p.appendChild(this);
}

p1有效,但我想确保 this.line , 所以我更喜欢使用 current_gene_pcp ,但是 p2返回 <html></html>作为 parent ,即使p3返回正确的 <g></g> .最后一个版本似乎是一个等待发生的错误。有没有更好的办法?

最佳答案

D3 选择只是一个围绕所选元素的双数组。正如您在 p3 中发现的那样,如果需要,您可以取消引用数组以找到您的第一个节点。但是,确实存在更好的方法:

来自 selection.node() 的文档:

Returns the first non-null element in the current selection. If the selection is empty, returns null.

在你的情况下:

var dad = current_gene_pcp.node().parentNode;

但是,如果您不需要 DOM 句柄以外的行,您还不如直接获取它:

// Search document-wide...
var dad = document.querySelector(".line[name=" + current_gene_name + "]");

// ...or only as a child of the current DOM element
var dad = this.querySelector(".line[name=" + current_gene_name + "]");

关于javascript - 如何访问选择的 parentNode 以引发元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10607732/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com