Question

我还是JS + Python的初学者，我很乐意在一个问题上得到你的帮助。我基本上需要的是预先渲染网络的d3js 可视化（例如http://bl.ocks.org/mbostock/4062045）到静态页面。主要目的是减少页面负载。作为副作用，静态页面对于渲染可用于图形缩略图的png的脚本也是更好的输入。

所以我想象一下我运行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

Answer 1

您可以使用CasperJS满足这两个要求。 Casper是一个库，它将使用headless browser来请求一个网页，它也可以通过编程方式与之交互。如何获取屏幕截图的简单片段如下：

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

您可以为此添加延迟，以确保在拍摄屏幕截图时力图处于稳定状态。 Casper可以抓取页面上的任何内容，因此，如果您在html表中显示计算出的节点值，请告诉Casper该表的ID，然后它可以抓取它并为您保存值。您甚至可以保存由d3.js代码生成的SVG对象。

Answer 2

This excellent graphic（由nbtimes为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()设置为一个非常低的数字，表明布局基本上已经解决了。因此，滴答处理程序ticked()可能只会在布局由于低alpha值而停止滴答之前被调用一次。

但是，请注意，将alpha设置为非常低的值是有条件的，具体取决于positions可用。因此，如果positions没有预加载，因此会undefined，布局会反复打勾一段时间，直到它定位到某个位置。这告诉我，在导出位置的过程中，也使用了渲染此静态布局的相同代码 - 可能还有一些额外的代码但没有加载计算的positions。那真的很聪明（！）。

用于收集和写入文件位置的代码似乎不是此页面源代码的一部分，这很有意义，但您可以在项目环境中找到一种方法。< / p>

D3预渲染

2 个答案: