如何访问d3.jsselect的父节点？
我创build了以下文件：
<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> 当我把鼠标放在每个path上时，我想把它追加到svg：g的最后面，所以它出现在其他行的顶部，但我不知道如何正确select父节点：
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); }
虽然p3返回了正确的<g></g> <html></html> ，但是我想确保“this”是一个.line， <g></g> 。 这最后的版本看起来像是一个等待发生的错误。 有没有更好的办法？
D3select只是一个包裹在所选元素上的双数组。 正如你在p3中发现的那样，如果你愿意的话，你可以解引用数组来find你的第一个节点。 但是，更好的方法确实存在：
来自selection.node()的文档：
返回当前select中的第一个非
null元素。 如果select是空的，则返回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 + "]");
以下是将鼠标hover元素移到前面的快速方法：
selection.on("mouseover", function() { this.parentNode.appendChild(this); });
另请参阅d3-js组中的相关线程 。
有两种方法可以访问它。
或者像这样使用第三个variables ： 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>
