D3預渲染

我仍然是初學JS + Python，我很樂意爲您解決一個問題。我基本上需要的是將網絡的可視化（例如http://bl.ocks.org/mbostock/4062045）預呈現爲靜態頁面。主要目的是減少頁面負載。作爲一個副作用，靜態頁面對於渲染可以用於圖形縮略圖的png的腳本來說也是更好的輸入。D3預渲染

所以我想象一下我運行Force Directed算法一次，然後將最終節點位置的值存儲到一個靜態文件中（其中節點位置被嵌入）。系統目前正在Google App Engine上使用Python/Django運行。那可能嗎？

代碼示例/小提琴會很棒！

披露：我在這裏d3js large force-directed graph server side simulation讀這一個，這一個http://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side.html

來源

2014-10-08 user2982726

This excellent graphic（由mbostock對南方週末）展示瞭如何使基於預先計算的位置DOM的靜態圖佈局。所有的代碼都在主html文檔上，所以只是「查看源代碼」。

它首先加載數據，然後調用ready：

queue() 
    .defer(d3.json, "http://graphics8.nytimes.com/newsgraphics/2013/09/07/director-star-chart/ed9eaa686bc2e11f0657a78d9be292a730c0567a/graph.json") 
    .defer(d3.json, "http://graphics8.nytimes.com/newsgraphics/2013/09/07/director-star-chart/ed9eaa686bc2e11f0657a78d9be292a730c0567a/layout.json") 
    .await(ready);

如果你挖的樣子以.json文件裏面，你會得到的，他們會選擇如何捕捉圖形數據的意義。

的ready處理程序是這樣開始的：

function ready(error, graph, positions) { 
    force 
    .nodes(graph.nodes) 
    .links(graph.links) 
    .on("tick", ticked) 
    .start(); 

    if (positions) force.alpha(.0051); 

    ....

你可以看到，它的初始化力佈局並設置其alpha()一個非常低的數字，信號，佈局基本上解決了。因此，在佈局由於alpha值較低而停止滴答滴答之前，滴答處理程序ticked()可能只會被調用一次。

但是，還要注意，將alpha設置爲非常低的值是有條件的，具體取決於可用的positions。因此，如果positions沒有預先加載，因此將是undefined，佈局會反覆打勾一段時間，直到它安置在某個位置。這向我暗示，在導出位置的過程中，也使用了呈現此靜態佈局的相同代碼 - 可能帶有一些附加代碼，但未加載計算的positions。他們真的很聰明（！）。

用於收集和寫入文件位置的代碼看起來並不是本頁面源代碼的一部分，這很合理，但您可以在項目環境中想出一種方法。

來源

2014-10-08 03:29:30 meetamit

您可以通過CasperJS滿足這兩個要求。 Casper是一個庫，它將使用一個headless browser來請求一個網頁，它也可以用編程方式進行交互。如何抓取截屏的簡單的片段是這樣的：

casper.start('http://ninjaPixel.io/', function() { 
    this.capture('page.png', undefined, { 
     format: 'png' 
    }); 
});

您可以添加一個延遲到這一點，以確保您的力圖在一個穩定的狀態，當你把屏幕截圖。卡斯帕可以抓取任何頁面，所以如果你在html表格中顯示你的計算節點值，例如，告訴卡斯帕該表的ID，然後它可以抓住它併爲你保存值。你甚至可以保存由你的d3.js代碼生成的SVG對象。

來源

2014-10-08 18:23:34 ninjaPixel

回答

相關問題