发表新帖
发表新帖

How to access the parentNode of a d3.js selection?

前端 未结
关注
4 1234
情歌与酒
情歌与酒 2020-12-05 06:46

I\'ve created the following document:


    ​​
    <
相关标签:
4条回答
  • 隐瞒了意图╮
    2020-12-05 06:55

    There are two ways to access it.
    Either use the third variable like this: someNode.attr("someAttrib", function(d, i, j) { console.log(d, i, j); });. The j contains the data you supplied to the parent node.
    or use d3.select(this.parentNode).data()[0].id;.

    An example: 

    <!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>
    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-05 07:06

    Here's a quick way to move the mouseover element to the front:

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

    See also a related thread in the d3-js group.

    0 讨论(0)
  • 清歌不尽
    2020-12-05 07:18

    A D3 selection is just a double-array wrapped around the element(s) selected. As you found with p3, you can dereference the arrays to find your first node, if you want. However, a better method does exist:

    From the docs for selection.node():

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

    In your case:

    var dad = current_gene_pcp.node().parentNode;

    However, if you don't need the line other than the DOM handle, you might as well just get that directly:

    // 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 + "]");
    0 讨论(0)
  • 广开言路
    2020-12-05 07:19

    For some reason, I had to go up 2x levels: console.log(">>"+my_chart.node().parentNode.parentNode.id+"<<")

    0 讨论(0)
 看不清?
提交回复
热议问题