D3在直線邊緣和多個曲線邊緣之間切換

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

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

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

來源

2017-12-27 tgordon18

看起來最大的計算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(); 
}

來源

2017-12-27 19:33:12 tgordon18

D3在直線邊緣和多個曲線邊緣之間切換

回答

相關問題