PhantomJS 屏幕截图 D3.js 数据图

Question

我想截图D3的地图比如this一张。我可以使用 PhantomJS and rasterize.js.

截取网站的屏幕截图

phantomjs rasterize.js https://martingonzalez.net/datamaps-d3-example/ map_rasterize_1000x500.png 1000px*600px

不幸的是，弧线被切断，如下所示。

有没有办法得到完整的弧线？如果这样更直接的话，我还可以使用 D3 地图拍摄本地 HTML 文件的图像。

PS 我使用了下面的示例 rasterize.js。

"use strict";
var page = require('webpage').create(),
    system = require('system'),
    address, output, size, pageWidth, pageHeight;

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
    console.log('  image (png/jpg output) examples: "1920px" entire page, window width 1920px');
    console.log('                                   "800px*600px" window, clipped to 800x600');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
        size = system.args[3].split('*');
        if (size.length === 2) {
            var pageWidth = parseInt(size[0], 10),
                pageHeight = parseInt(size[1], 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
        } else {
            console.log("size:", system.args[3]);
            var pageWidth = parseInt(system.args[3], 10),
                pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
            console.log ("pageHeight:",pageHeight);
            page.viewportSize = { width: pageWidth, height: pageHeight };
        }
    }
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

Answer 1

尝试改变这个逻辑：

 window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);

为此：

 window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 5000);

可能5000毫秒太多了，不过是为了测试。知道动画何时结束比捕获屏幕截图更好。

PhantomJS 屏幕截图 D3.js 数据图

PhantomJS screen capture D3.js datamaps

javascript

phantomjs

d3.js

datamaps