web-dev-qa-db-ja.com

d3.js選択のparentNodeにアクセスする方法は？

次のドキュメントを作成しました。

<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を使用することを好みましたが、p3は適切な<html></html>を返しますが、p2は<g></g>を親として返します。この最後のバージョンは、バグが発生するのを待っているようです。もっと良い方法はありますか？

javascriptd3.js
38
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 + "]");
_
45
Phrogz

Mouseover要素を前面に移動する簡単な方法を次に示します。

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

D3-jsグループの 関連スレッド も参照してください。

35
mbostock

アクセスするには2つの方法があります。
次のように 3番目の変数 を使用します：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>
5
Nav