強制的なネットワークのノードをクリックして外部の棒グラフを更新する方法

Question

強制的なネットワークのノードをクリックして棒グラフの内容を更新しようとしています。現在、メインパネルで "mousemove"イベントを使用して、どのアクティブな行にアクセスするかを通知する変数activeNodeを更新する "ポイント"イベントを使用しようとしています。私は、メインパネルからの私のポイントイベントがactiveNodeを更新せず、常にそのデフォルト値に設定されているという事実に問題があります。これで修正を探してみようとしましたが、もっと基本的な概念が欠けていると思います。ここで

がコードです...

var w = document.body.clientWidth, 
    h = document.body.clientHeight, 
    colors = pv.Colors.category19(), 
    activeNode = 0; 

var vis = new pv.Panel() 
    .width(w) 
    .height(h) 
    .fillStyle("white") 
    .event("mousemove", pv.Behavior.point(Infinity)); 

var force = vis.add(pv.Layout.Force) 
    .width(w-200) 
    .nodes(miserables.nodes) 
    .links(miserables.links); 

force.link.add(pv.Line); 

force.node.add(pv.Dot) 
    .def("o",-1) 
    .size(function(d) (d.linkDegree + 10) * Math.pow(this.scale, -1.5)) 
    .fillStyle(function(d) d.fix ? "brown" : colors(d.group)) 
    .strokeStyle(function() this.fillStyle().darker()) 
    .lineWidth(1) 
    .title(function(d) this.index) 
    .event("mousedown", pv.Behavior.drag()) 
    .event("drag", force) 
    .event("point", function() {activeNode = this.index; return vis;}); 

vis.add(pv.Label).top(20).left(w/2).text("activeNode = " + activeNode); 

vis.add(pv.Bar) 
    .data(topw[activeNode].splice(0)) 
    .top(function(d) this.index * 30) 
    .left(w-80) 
    .width(15) 
    .height(20) 
    .anchor("left").add(pv.Label) 
     .textAlign("right")  
     .text(function(d) d[0]); 

vis.render(); 

Answer 1

あり問題のカップルがここにありますが、基本的なものは、概念です - あなたはあなたのビジュアライゼーション内のマークのプロパティを宣言しているとき、次のいずれかを実行でき、使用

.width(10) 

等の機能、：のような値、

.width(function() { return 10; }) 

違いは、Sでありますecondバージョンはvis（またはvisの関連部分）render()のたびに再評価されます。例えば、あなたが持っている場所：

vis.add(pv.Label).top(20).left(w/2).text("activeNode = " + activeNode); 

これはvisがレンダリングされた最初のときにのみ評価されます。だからあなたの修正コードは（私はあなたが参照するtopwデータへのアクセスを持っていないので、私は、バーは少しをグラフに変更）のようになります

// assign the label to a variable, so we can refer to it later 
// this is easiest if we define the label and bar first 
var nodeLabel = vis.add(pv.Label) 
    .top(20) 
    .left(w/2) 
    .textAlign("right") // easier for my bar layout 
    // note that this has to be a function, so that it will be 
    // re-evaluated on re-render 
    .text(function() { 
     return "activeNode = " + (activeNode ? activeNode.nodeName : 'None') 
    }); 

：代わりに、関数が必要

var w = document.body.clientWidth, 
    h = document.body.clientHeight, 
    colors = pv.Colors.category19(), 
    activeNode = null; 

var vis = new pv.Panel() 
    .width(w) 
    .height(h) 
    .fillStyle("white") 
    .event("mousemove", pv.Behavior.point(Infinity)); 

// assign the label to a variable, so we can refer to it later 
// this is easiest if we define the label and bar first 
var nodeLabel = vis.add(pv.Label) 
    .top(20) 
    .left(w/2) 
    .textAlign("right") // easier for my bar layout 
    // note that this has to be a function, so that it will be 
    // re-evaluated on re-render 
    .text(function() { 
     return "activeNode = " + (activeNode ? activeNode.nodeName : 'None') 
    }); 

// again, assign the bar to a variable 
// I think I'm missing some data for your example, so 
// I made a single bar to show node degree 
// (only one data point, so no .data() needed) 
var nodeBar = vis.add(pv.Bar) 
    .top(0) 
    .left(w/2) 
    .height(20) 
    .width(function() { 
     // make a scale based on all nodes 
     var scale = pv.Scale.linear(
      // get the max link degree to be the upper limit of the scale 
      0, pv.max(miserables.nodes, function(d) { return d.linkDegree; }) 
     ).range(0, 200); 
     // return a value based on the active node 
     return activeNode ? scale(activeNode.linkDegree) : 0; 
    }); 

var force = vis.add(pv.Layout.Force) 
    .width(w-200) 
    .nodes(miserables.nodes) 
    .links(miserables.links); 

force.link.add(pv.Line); 

force.node.add(pv.Dot) 
    .def("o",-1) 
    .size(function(d) (d.linkDegree + 10) * Math.pow(this.scale, -1.5)) 
    .fillStyle(function(d) d.fix ? "brown" : colors(d.group)) 
    .strokeStyle(function() this.fillStyle().darker()) 
    .lineWidth(1) 
    .title(function(d) this.index) 
    .event("mousedown", pv.Behavior.drag()) 
    .event("drag", force) 
    .event("point", function(d) { 
     // set the global variable to point to the current node 
     activeNode = d; 
     // re-render the label 
     nodeLabel.render(); 
     // re-render the bar 
     nodeBar.render(); 
    }); 

vis.render();