如何在InfoVis/JIT力指向圖中隱藏和恢復自定義節點？

Question

我正在嘗試使用InfoVis/JIT來呈現可視化網絡的強制有向圖。 我是Java腳本和JIT的新手。 我使用js文件中的以下代碼創建了自己的自定義節點類型，這使我可以在節點上顯示我的圖像。

$jit.ForceDirected.Plot.NodeTypes.implement({ 
    'icon1': { 
     'render': function(node, canvas){ 
        var ctx = canvas.getCtx(); 
        var img = new Image(); 
        img.src='magnify.png'; 
        var pos = node.pos.getc(true); 
        img.onload = function() { 
          ctx.drawImage(img, pos.x, pos.y); 
        }; 

      }, 
      'contains': function(node,pos){ 
        var npos = node.pos.getc(true); 
        dim = node.getData('dim'); 
        return this.nodeHelper.circle.contains(npos, pos, dim); 
        //return this.nodeHelper.square.contains(npos, pos, dim); 
      } 
    } 

我分配這個自定義節點類型爲使用「$型」節點：在JSON數據對象「ICON1」。我在節點上獲取圖像，但問題是我無法在需要時隱藏它。我可以使用以下代碼隱藏像圓形，方形等內置節點類型。

node.setData('alpha', 0); 
node.eachAdjacency(function(adj) { 
    adj.setData('alpha', 0); 
}); 
fd.fx.animate({ 
    modes: ['node-property:alpha', 
      'edge-property:alpha'], 
    duration: 2000 
}); 

但是相同的代碼不適用於自定義節點。 因此，我嘗試暫時將節點類型更改爲內置的「圓」類型，將其隱​​藏，然後將節點類型重新設置爲其原始節點，即我的自定義節點icon1。

function hideNode(){ 
    var typeOfNode = node.getData('type'); 
    node.setData('type','circle'); 
    node.setData('alpha', 0); 
    node.eachAdjacency(function(adj) { 
     adj.setData('alpha', 0); 
    }); 
    fd.fx.animate({ 
      modes: ['node-property:alpha', 
        'edge-property:alpha'], 
      duration: 2000 
    }); 

    node.setData('type',typeOfNode);  
} 

我認爲這應該工作，但自定義圖像在畫布上回來一會兒。 如果我沒有將節點的類型重置爲它的原始類型，即在上面的代碼中，並註釋掉以下語句並調用隱藏功能，則該節點將被隱藏。

node.setData('type',typeOfNode); 

我無法弄清楚如何通過節點的類型只設置一些自定義類型，節點正在呈現。任何幫助這個問題將不勝感激。

我需要重新設置節點的類型爲其原來的位置，因爲我希望節點在需要時通過調用取消隱藏功能進行恢復。如果我沒有將節點的類型重置爲原始類型，那麼它在恢復時會呈現爲一個圓形。

我已經通過API和谷歌組的JIT，但無法找到答案。 任何人都可以幫忙嗎？

Answer 1

下面就一起來看看片斷從情節的plotNode功能：

var alpha = node.getData('alpha'), 
    ctx = canvas.getCtx(); 
ctx.save(); 
ctx.globalAlpha = alpha; 

// snip 

this.nodeTypes[f].render.call(this, node, canvas, animating); 
ctx.restore(); 

正如你可以看到，該節點的阿爾法值立即節點的渲染函數被調用之前應用到畫布上。渲染節點之後，畫布會恢復到之前的狀態。

的這裏的問題是，您的自定義節點的render功能不渲染節點同步，並在畫布上的狀態是越來越調用drawImage之前恢復。所以，你可以做兩件事情之一：

1）預載和緩存圖像（首選的方法，因爲這也將防止圖像閃爍，並表現幫助）：

// preload image 
var magnifyImg = new Image(); 
magnifyImg.src = 'magnify.png'; 

// 'icon1' node render function: 
'render': function(node, canvas){ 
    var ctx = canvas.getCtx(); 
    var pos = node.pos.getc(true); 
    ctx.drawImage(magnifyImg, pos.x, pos.y); 
} 

或2 ）保存畫布狀態，重新α，然後在你的onload處理程序繪製圖像後恢復畫布狀態：

// 'icon1' node render function: 
'render': function(node, canvas){ 
    var ctx = canvas.getCtx(); 
    var img = new Image(); 
    img.src='magnify.png'; 
    var pos = node.pos.getc(true); 
    img.onload = function() { 
     ctx.save(); // save current canvas state 
     ctx.globalAlpha = node.getData('alpha'); // apply node alpha 
     ctx.drawImage(img, pos.x, pos.y); // draw image 
     ctx.restore(); // revert to previous canvas state 
    }; 
}