D3预呈现 [英] D3 Pre-Rendering

问题描述

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

I'm still a beginner with JS + Python and I'd be really happy to get your help on one problem. What I basically need to to is to pre-render a d3js visualization of a network (as for example http://bl.ocks.org/mbostock/4062045) into a static page. The main aim is to reduce the pageload. As a side-effect, a static page would also be a better input for scripts that render a png that could be used for thumbnails of the graph.

所以我想象一个网站，其中我运行Force Directed算法一次，然后将最终节点位置的值存储到静态文件（其中嵌入了节点位置）。该系统目前正在Google App Engine上使用Python / Django运行。那可能吗？

So I imagine one site where I run the Force Directed algorithm once and then store the values of final node positions into a static file (where the node positions then are embedded). The system is currently running with Python/Django on Google App Engine. Is that possible?

代码示例/ Fiddle会很棒！

Code examples/Fiddle would be great!

此处的 d3js大型有向图服务器端模拟这一个 http：// mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side.html

推荐答案

您可以使用 CasperJS 满足这两个要求。 Casper是一个库，将使用无头浏览器请求一个网页，它也可以以编程方式与之交互。一个如何抓取屏幕截图的简单代码片段如下：

You can satisfy both requirements with CasperJS. Casper is a library that will use a headless browser to request a web page, which it can also programmatically interact with. A simple snippet of how to grab a screen shot goes something like this:

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

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

You can add a delay to this, to make sure that your force diagram is in a stable state when you take the screen shot. Casper can grab anything off the page, so if you display your computed node values in a html table, for example, tell Casper the id of that table and it can then grab it and save the values for you. You could even save the SVG object generated by your d3.js code.

这篇关于D3预呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！