d3.js - マウスオーバーでノードとそれに接続されているすべてのノードをグラフの前面に移動するにはどうすればよいですか?

Question

(編集: 質問は解決しました。以下を参照してください) 私は生物学者であり、シナプス接続のマッピングとデータの分析を行っています。ネットワークを視覚化するためのかなりクールなアイデアがいくつかあり、ウェブ上で視覚化を共有できる方法でそれらを実装するために D3 を学ぼうとしています。ノードとリンクで構成されるグラフがあります。ノードにマウスオーバーすると、そのノードと接続されているすべてのノードがグラフの上部に移動して、周囲のノードに隠れないようにします。私は一般的にプログラミングにかなり慣れていないので、これがばかげた質問である場合はご容赦ください。現在、マイク・ボストックが他の誰かの質問に応えて提唱した提案を使用して、直接マウスオーバーしたモードで動作しています。つまり、何かを最初の子位置に移動する関数を定義します。

d3.selection.prototype.moveToFront = function() { 
return this.each(function() { this.parentNode.appendChild(this);}); 
}; 

ノードが接続されているインデックスも作成するには（別の投稿から取得）

var linkedByIndex = {};
links.forEach(function(d) {
    linkedByIndex[d.source.Id + "," + d.target.Id] = 1;
            });

function isConnectedNode(a, b) {
    linkedByIndex[a.Id + "," + b.Id] || linkedByIndex[b.Id + "," + a.Id] || a.Id == b.Id;
            }

次に、これらのものを使用するマウスオーバー機能を用意します。

function nodeMouseover(d){
     d3.select(this).moveToFront();
         svg.selectAll("circle").transition()
               .duration(250)
               .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})
               .attr("class", function(e){return isConnectedNode(d,e) ? "active":"inactive";});
}

さて、これはすべて、マウスオーバーしたノードを前面に移動するために機能します。また、すべての CONNECTED ノードを前面に移動したいので、私がしたいことは次のとおりです: の .active クラス属性を使用しますノード (接続されているすべてのノードに正常に割り当てられている) は、mouseover 関数内で moveToFront を再度呼び出して、次のように前面に移動します。

function nodeMouseover(d){
     d3.select(this).moveToFront();
         svg.selectAll("circle").transition()
               .duration(250)
               .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})
               .attr("class", function(e){return isConnectedNode(d,e) ? "active":"inactive";});
         svg.selectAll(".active").moveToFront();
}

しかし、これは機能せず、理由がわかりません...何かアイデアはありますか? これを行う簡単な方法はありますか？私はこれを楽しんでおり、ここで物事がどのように機能するかを本当に理解しようとしているので、どんな助けも大歓迎です.

解決策: OK、.each() ステートメントを使用してすべてを解決します。私の nodeMouseover は次のようになります。

function nodeMouseover(d){
                svg.selectAll(".link").attr("display", function(p){return isConnectedEdge(d, p) ? "block" : "none";});

                svg.selectAll("circle").each(function(e){if (isConnectedNode(d,e)){d3.select(this).moveToFront();}})
                                        .transition()
                                        .duration(250)
                                        .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})}

class 属性を使用していないことに注意してください。これはそれを行うための最良の方法ですか？見てくださった方、改めてありがとうございました。