如何访问d3.js选择的父节点？

我创建下列文件：如何访问d3.js选择的父节点？

<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的作品，但我想，以确保“本”是一个.line区段，所以我更愿意使用current_gene_pcp，但P2返回<html></html>作为父母，即使P3返回正确的<g></g>。这最后的版本看起来像是一个等待发生的错误。有没有更好的办法？

来源

2012-05-15 nachocab

甲D3选择仅仅是一个双阵列中选择的元件（一个或多个）缠绕。正如您在p3中找到的那样，如果需要，您可以取消引用数组以找到您的第一个节点。然而，更好的方法确实存在：

从文档为selection.node()：

返回当前选择的第一非null元件。如果选择为空，则返回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 + "]");

来源

2012-05-15 19:55:15 Phrogz

以下是将鼠标悬停元素向前移动的快速方法：

selection.on("mouseover", function() { this.parentNode.appendChild(this); });

另请参阅d3-js组中的related thread。

来源

2012-05-15 21:08:30 mbostock

此行为是不稳定的。当我在Chrome中结合使用'：hover'样式进行试用时，这些样式可以正确应用。当我在Firefox（v20）中尝试这个时，样式根本不应用。当我删除这个'mouseover'代码时，这些样式在Firefox中正确应用。我想这是由于元素的mouseover'在它重新作为它的DOM的最后一个子元素之前尝试删除它自己造成的。 –

有两种访问方法。
可以使用这样的third variable：someNode.attr("someAttrib", function(d, i, j) { console.log(d, i, j); });。 j包含您提供给父节点的数据。
或使用d3.select(this.parentNode).data()[0].id;。

一个例子：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<div id="area", width="1000px" height="1000px"></div> 
<script> 
var GAP = 10, NODE_RADIUS = 14; 

    var nodes = [ 
    {id: 1, prop: [{id: 1, something: 1}], abc: 1}, 
    {id: 2, prop: [{id: 1, something: 1}, {id: 2, something: 1}, {id: 3, something: 1}], abc: 2}, 
    {id: 3, prop: [{id: 1, something: 1}, {id: 2, something: 1}], abc: 3}, 
    {id: 4, prop: [{id: 1, something: 1}], abc: 4}, 
    {id: 5, prop: [{id: 1, something: 1}], abc: 5}, 
    {id: 6, prop: [], abc: 6} 
    ]; 

var nodeLayer = d3.select("#area").selectAll(".node").data(nodes, function(d) {return d.id; }); 
var iNodes = nodeLayer.enter().append("svg").attr("class", "node"); 
    //append the black circle 
    iNodes.append("circle") 
       .style("fill", "black") 
       .attr("r", NODE_RADIUS) 
       .attr("cx", function(d) {return 10 + d.id * 10;}) 
       .attr("cy", 100); 

    iNodes.append("g").selectAll(".prop").data(function(d) {return d.prop;}).enter() 
      .append("text") 
       .text(function(d,i,j){console.log("parent id="+j); return d3.select(this.parentNode).data()[0].id;}) 
       .attr("dx", 50) 
       .attr("dy", 50) 
       .style("font-size", "8px") 
       .style("fill", d3.rgb(180,0,0)) 
       .style("text-anchor", "middle"); 

</script> 
</body>

来源

2014-11-26 11:10:02 Nav

如何访问d3.js选择的父节点？

回答

相关问题