d3.js - マウスオーバーで D3 フォース レイアウト ネットワーク ダイアグラムを表にリンク

Question

Michael Bostock の分子の強制ネットワークの例を取り上げました。http://bl.ocks.org/mbostock/3037015

http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.htmlの例に従って、データの表を追加しました。

ネットワークとテーブルに別々のマウスオーバー イベントを追加しました。ダイアグラム内のノードにマウスを合わせると、選択したノードがオレンジ色で強調表示されます。

        var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")
            .attr("class", "node")

            .on("mouseover", function() { 
                d3.select(this).select("circle").style("stroke-width", 6  ); 
                d3.select(this).select("circle").style("stroke", "orange"); 
                d3.select(this).select("text").style("font", "20px sans-serif");
                })
            .on("mouseout",  function() { 
                d3.select(this).select("circle").style("stroke-width", 1.5); 
                d3.select(this).select("circle").style("stroke", "gray"  ); 
                d3.select(this).select("text").style("font", "12px sans-serif");
                })
            .call(force.drag)
            ;

テーブルの行にマウスを合わせると、選択した行がオレンジ色で強調表示されます。

            var rows = tbody.selectAll("tr")
                .data(data)
                .enter().append("tr")
                .on('mouseover', function(){d3.select(this).style('background-color', 'orange');})
                .on('mouseout',  function(){d3.select(this).style('background-color', 'white');})
                ;

次のように、図と表のマウスオーバーの強調表示をリンクしたいと思います。

• ダイアグラム内のノードにマウスを合わせると、選択したノードとテーブル内の対応する行の両方が強調表示されます。

• テーブル内の行にマウス ポインタを合わせると、選択した行とダイアグラム内の対応するノードの両方が強調表示されます。

D3 でマウスオーバー リンクされた図と表の例を見つけることができませんでした。一つ教えていただけますか？または解決策を提案しますか？

D3 (d3.v3.js) とデータ (graph.json) のローカル コピーを使用して、Windows 版 Firefox 20.0.1 で図を表示しています。

ご協力いただきありがとうございます。