2017-12-27 258 views
0

我有一個D3力量圖,與this example中的力量圖類似,只是一對節點節點之間可以有多於2個邊。我希望能夠在可視化所有邊緣和僅僅一條直線邊緣之間進行切換。我已經通過簡單地改變邊緣的可見性(隱藏或可見)來實現這一點,但是節點之間存在如此多的邊緣以至於存在可見的滯後。D3在直線邊緣和多個曲線邊緣之間切換

我的想法是解決這個問題,只能在直邊上運行力模擬,而不是包括所有的曲邊。這會將邊緣限制爲每對節點的一個邊緣,從而使得力仿真算法不那麼緊密。

是否有可能做到這一點,同時仍然能夠渲染未在強制算法中使用的彎曲邊緣?

回答

0

看起來最大的計算boggleneck實際上出現在.on("tick", tickActions)步驟中,當代碼計算如何繪製所有路徑時,即使是不可見的路徑。

對於任何人的興趣,我改變了tick actions功能繪製邊緣或在此之前首先檢查type變量:

function tickActions() { 
    // plot the curved links 
    link.attr("d", function(d) { 
     if (d.type != draw_type) return null; 

     // code to draw paths 

    }); 
} 

通過改變draw_type變量,你可以決定哪些邊真正得到計算,並得出。

除此之外,您還需要忽略某些邊緣的強度。我知道,我想被間隔僅基於直邊我的圖形,所以我做了simulation.force('link', link_force)屬性如下:

var link_force = d3.forceLink() 

    // code for .id and .distance attributes 

    // return 0 for all non 
    .strength(function(d) { 
     if (d.type != 'straight') return 0; 
     return 0.3; 
    }); 

通過將所有非直線邊緣的強度爲0,力算法在間隔節點時基本上忽略它們。

最後,我添加了一個restart_network()函數,它更新圖形。可以使用這個函數來改變圖中看到的實際鏈接數據,但我也決定包含其他更改。

function restart_network() { 
    simulation.force("link", link_force); 
    simulation.alpha(1).restart(); 
}