14

ネットワーク ダイアグラム (強制指向グラフ)、散布図、およびすべて相互に接続されたテーブルがあります ( jsFiddleを参照)。相互接続は、マウスオーバー イベントに対して必要な方法で機能しています。コードを変更して、ネットワーク ダイアグラム内のノードにマウスを合わせると、マウスを置いたノードが強調表示されるだけでなく (散布図とテーブルでのその接続も)、そのすぐ隣のノードも強調表示されます (同様に)散布図とテーブルの接続として）。

選択したノード、そのリンク、およびその子を D3 強制有向グラフで強調表示 の情報を参考にしました。途中のどこかで (正確にはわかりませんが)、接続されたノードを定義するのに役立つ関数の例を見つけましたisConnected()。 

function isConnected(a, b) {
    return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
    }

この関数をマウスオーバー イベントに組み込みたいと思います。おそらくif()ステートメントを使用して、必要なすべての「強調表示」を実行できるようにします。しかし、私は D3 と js が初めてで、設定方法がわかりません。

以下は、変更したい( jsFiddleからの) コードのスニペットです。他の例への提案や指針をいただければ幸いです。

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", function(d) { return "node " + d.name + " " + d.location; })
    .call(force.drag)
    .on("mouseover", function(d) { 
        // I would like to insert an if statement to do all of these things to the connected nodes
        // if(isConnected(d, o)) {
            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");
            d3.selectAll("rect." + d.location).style("stroke-width", 6);
            d3.selectAll("rect." + d.location).style("stroke", "orange");
            d3.selectAll("text." + d.location).style("font", "20px sans-serif");
            d3.selectAll("tr." + d.name).style("background-color", "orange");
            //}
        })
    .on("mouseout",  function(d) { 
        // if(isConnected(d, o)) {
            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");
            d3.selectAll("rect." + d.location).style("stroke-width", 1.5);
            d3.selectAll("rect." + d.location).style("stroke", "gray");
            d3.selectAll("text." + d.location).style("font", "12px sans-serif");
            d3.selectAll("tr." + d.name).style("background-color", "white");
            //}
        });
4

2 に答える 2

0

私が構築したこのものは、Ego Network 機能を使用してそれを行います。

https://gist.github.com/emeeks/4588962

ノードに .on("mouseover", findEgo) を追加すると、何らかの種類の識別 uid 属性がある限り、次のように動作するはずです。n 次の自我ネットワークを許可し、他のネットワーク分析関数用の集計テーブルを作成するため、これは少しやり過ぎですが、基本的な機能は必要なものを提供し、あなたや他のユーザーはその側面が役立つと思うかもしれません:

 function findEgo(d) {  
  var computedEgoArray = findEgoNetwork(d.id, 1, false,"individual");
  d3.selectAll("circle.node").style("fill", function(p) {return p.id == d.id ? "purple" : computedEgoArray.indexOf(p.id) > -1 ? "blue" : "pink"})
 }

 function findEgoNetwork(searchNode, egoNetworkDegree, isDirected, searchType) {
  var egoNetwork = {};
  for (x in nodes) {
  if (nodes[x].id == searchNode || searchType == "aggregate") {
   egoNetwork[nodes[x].id] = [nodes[x].id];
   var z = 0;
   while (z < egoNetworkDegree) {
    var thisEgoRing = egoNetwork[nodes[x].id].slice(0);
    for (y in links) {
     if (thisEgoRing.indexOf(links[y].source.id) > -1 && thisEgoRing.indexOf(links[y].target.id) == -1) {
     egoNetwork[nodes[x].id].push(links[y].target.id)
     }
    else if (isDirected == false && thisEgoRing.indexOf(links[y].source.id) == -1 && thisEgoRing.indexOf(links[y].target.id) > -1) {
    egoNetwork[nodes[x].id].push(links[y].source.id)
    }
 }
 z++;
 }
 }
 }
 if (searchType == "aggregate") {
 //if it's checking the entire network, pass back the entire object of arrays
 return egoNetwork;
 }
 else {
 //Otherwise only give back the array that corresponds with the search node
 return egoNetwork[searchNode];
 }
 }
于 2013-06-08T02:43:50.157 に答える