39

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

<g>
    <path class=​&quot;line" name=​&quot;gene_1" stroke=​&quot;#aec7e8" d=​&quot;M10.47...">​&lt;/path>​
    <path class=​&quot;line" name=​&quot;gene_2" stroke=​&quot;#aec7e8" d=​&quot;M10.47...">​&lt;/path>​
    <path class=​&quot;line" name=​&quot;gene_3" stroke=​&quot;#aec7e8" d=​&quot;M10.47...">​&lt;/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);
}

p1this動作しますが、それがであることを確認したかった.lineので、を使用することを好みましたcurrent_gene_pcpが、適切な。を返してp2も<html></html>、親として戻ります。この最後のバージョンは、発生するのを待っているバグのようです。もっと良い方法はありますか？p3<g></g>

4

6 に答える 6

49

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-15T19:55:15.943 に答える
35

マウスオーバー要素を前面に移動する簡単な方法は次のとおりです。

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

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

于 2012-05-15T21:08:30.410 に答える
5

アクセスするには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>
于 2014-11-26T11:10:02.850 に答える
0

何らかの理由で、私は2倍のレベルに上がる必要がありました：console.log(">>"+my_chart.node().parentNode.parentNode.id+"<<")

于 2019-11-07T16:05:55.240 に答える
0

私が行った1つの方法は次のとおりです。

bars.on('mouseover', d => {
let parentNode = d3.select(this.parentNode);
let tooltip = parentNode.append('rect)

thisキーワードから、現在のノードにアクセスして、その親ノードにタッチできます。

于 2021-01-05T04:58:48.423 に答える
0

D3 v4のリリースにより、これはある種のXY問題になりました。parentNode親の最後の子として要素を再挿入するためにに到達する必要はもうありません。D3のそのリリースから、次のselection.raise()方法が提供されるためです。

選択。レイズ（）

選択した各要素を、その親の最後の子として順番に再挿入します。に相当：

selection.each(function() {
  this.parentNode.appendChild(this);
});

イベントが最初のパラメーターとしてイベントリスナーに渡されるD3v6を使用すると（ changelogを参照）、コードは次のように単純になります。

function onmouseover(event) {
  d3.select(event.target).raise();
}

次のデモをご覧ください。

d3.select("g")
  .on("mouseover", event => d3.select(event.target).raise())
<script src="https://d3js.org/d3.v6.js"></script>

<svg width="400" height="400">
  <g>
    <rect x="100" y="50" width="100" height="100" fill="red"></rect>
    <rect x="150" y="50" width="100" height="100" fill="blue"></rect>
  </g>
</svg>

于 2021-01-05T14:31:57.910 に答える