訪問d3js可視化離線

Question

所有，

快速歉疚序言：我是很新的編碼，HTML，d3.js等

我一直在創造使用Plunker企業網絡的可視化網站。其中一個與Mike Bostock的分層邊緣捆綁圖非常相似：https://bl.ocks.org/mbostock/7607999。我有一個index.html文件，幾乎與他的相同，但我的.json文件有不同的數據。這些是我的「普普」中唯一的兩個文件。

我想在一次會議上提出這個可視化，但我不確定該怎麼做，而不在會議期間登錄到Plunker，如果什麼互聯網連接不好？......

有沒有一種辦法訪問這些可視化離線？我可以以某種方式將它們保存到拇指驅動器並在需要時加載它們？也許將它們導入Latex Beamer演示文稿？如果這已經被討論或者是微不足道的，請指出我正確的方向。

其中一個注意事項：我嘗試在Plunker中右鍵單擊圖像並執行「另存爲」，但生成的html文件看起來像我的圖像，但它沒有我需要的相同交互功能（突出顯示鼠標懸停期間發生的鏈接）。

感謝您的幫助。

丹

Answer 1

當我在測試D3的可視化，我只是打開與鍍鉻的JS純HTML文件時，數據被列爲該文件中的變量瀏覽器不會從文件加載數據在您的計算機上（安全問題）...

然而，我是從外部來源加載d3腳本，鉻不介意。

您可能會在html文件中包含d3腳本。那麼你不需要在線。但我從來沒有測試過這個，所以確保你可以在演示前離線進行。

編輯：

var locations = 
[ 
{"name": "Cochlear", "id": 1}, 
{"name": "DCN", "id": 2}, 
{"name": "AVCN", "id": 3}, 
{"name": "PVCN", "id": 4} 
]; 
var locCircles = svg.append("g") 
.attr("class", "locations") 
.selectAll("circle") 
.data(locations) 
.enter() 
.append('circle') 
.attr('cx', function(d) { return xPoint(d.id) })//centre locations around xPoints 
.attr('cy', height/2) 
.attr('r', 55) 
.attr('fill', function(d) { return color(d.id) }); 

這在D3力風格的圖形創建的圈子。