Javascript 使用Phantomjs从D3.js输出SVG图形_Javascript_D3.js_Phantomjs

Javascript 使用Phantomjs从D3.js输出SVG图形

javascript d3.js phantomjs

Javascript 使用Phantomjs从D3.js输出SVG图形,javascript,d3.js,phantomjs,Javascript,D3.js,Phantomjs,我试图在服务器端渲染一个力定向的D3.js图（因为使用的数据集的大小），并将其作为图的稳定状态的一组坐标输出，即在完成大多数重力计算时。目前我正在使用XMLSerlaizer 每当我使用phantomjs从命令行运行页面时，就好像从未使用调用图形绘制的函数一样。我想这可能是因为我添加了一个页面.onConsolleMessage，但它仍然是我希望评估的函数之外的控制台消息的唯一输出 var page = require('webpage').create(); page.content = '&

我试图在服务器端渲染一个力定向的D3.js图（因为使用的数据集的大小），并将其作为图的稳定状态的一组坐标输出，即在完成大多数重力计算时。目前我正在使用XMLSerlaizer

每当我使用phantomjs从命令行运行页面时，就好像从未使用调用图形绘制的函数一样。我想这可能是因为我添加了一个

页面.onConsolleMessage

，但它仍然是我希望评估的函数之外的控制台消息的唯一输出

var page = require('webpage').create();
page.content = '<html><body></body></html>';

console.log("before");

page.includeJs('https://d3js.org/d3.v3.min.js', function() {


    page.onConsoleMessage = function(msg) {
        console.log("Message:" + msg);
    };


    console.log("p");

    var html = page.evaluate(function() {
        var body = d3.select('body');

        var data = {
                "nodes":[
                        {"name":"Steve"},
                        {"name":"Dave"},
                        {"name":"Matt"},
                        ],
                "links":
                        [{"source":0, "target":1},
                        {"source":1, "target":2},
                        {"source":2, "target":0}
                        ]
                    }


        var force = d3.layout.force()
                .charge(-140)
                .linkDistance(2)
                .size([500, 500])
                .nodes(data.nodes)
                .links(data.links)
                .start();

        var svg = body.
                .append('svg')
                .attr("width", 500)
                .attr("height", 500)
                .attr("id", "svg");
        ...
        ...Graph drawing code
        ...


        var s = new XMLSerializer();
        return s.serializeToString(document.querySelector('svg'));
    });
console.log(html);
console.log(page.content);
phantom.exit();   //Never gets called, "after" is printed
});

console.log("after");
phantom.exit();

var page=require（'webpage'）.create（）；
page.content=''；
控制台日志（“之前”）；
第页，包括https://d3js.org/d3.v3.min.js，函数（）{
page.onConsolleMessage=函数（msg）{
console.log（“消息：+msg”）；
};
控制台日志（“p”）；
var html=page.evaluate（函数（）{
变量body=d3。选择（'body'）；
风险值数据={
“节点”：[
{“姓名”：“史蒂夫”}，
{“姓名”：“戴夫”}，
{“name”：“Matt”}，
],
“链接”：
[{“源”：0，“目标”：1}，
{“源”：1，“目标”：2}，
{“源”：2，“目标”：0}
]
}
var-force=d3.layout.force（）
。收费（-140）
.linkDistance（2）
.尺寸（[500500]）
.nodes（数据.nodes）
.links（data.links）
.start（）；
var svg=body。
.append（'svg'）
.attr（“宽度”，500）
.attr（“高度”，500）
.attr（“id”、“svg”）；
...
…图形绘制代码
...
var s=新的XMLSerializer（）；
返回s.serializeToString（document.querySelector（'svg'）；
});
log（html）；
console.log（page.content）；
phantom.exit（）；//永远不会调用，打印“after”
});
控制台日志（“之后”）；
phantom.exit（）；

所以我的问题是，如何在

页面中运行和输出图形绘制函数的值。includeJs…

感谢您抽出时间阅读我的问题

编辑

如果我移除周围的

page.includeJs（'https://d3js.org/d3.v3.min.js，函数（）{}）我会一直收到控制台消息，直到需要包含此javascript为止。如果不这样做，我如何包含d3.js
 通过移除周围的page.includeJs
块并替换为page.injectJs（'d3.v3.min.js'），将其修复