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

回答

相关问题