Question

我正在尝试使用d3上的PhantomJS在后端呈现SVG图像。 PhantomJS仅返回SVG的一部分（只是标题）。

到目前为止我尝试了什么：

我在浏览器控制台中运行了相同的脚本，并注意到如果我在运行alert(d3.select("#pieChart").html())后立即尝试执行svgDrawer（请参阅下面的代码），则会显示确切的部分SVG。但随后馅饼会被渲染到HTML上，再次运行alert(d3.select("#pieChart").html())会给我一个完整的SVG。
当我在PhantomJS中返回值时，认为渲染未完成，我将方法分为两个 - svgDrawer和svgGrabber。但即便如此，svgGrabber在从PhantomJS调用时会返回部分SVG数据。请注意，在浏览器控制台中串行运行的相同两种方法现在显示完整的SVG

请帮忙。提前谢谢。

这是我的样板HTML代码：

<!DOCTYPE html>
<html>
   <head>
      <script src="d3.min.js"></script>
      <script src="d3pie.js"></script>
      <meta charset="utf-8">
   </head>
   <body>
      <div id="pieChart"></div>
   </body>
</html>

这是javascript：

var fs = require('fs');
var page = require('webpage').create();
var url = 'file://' + fs.absolute('./d3.html');

var svgDrawer = function() {
    var pie = new d3pie("pieChart", {
        "header": {
            "title": {
                "text": "My pieChart"
            }
        },
        "data": {
            "content": [
                {
                    "label": "slice 1",
                    "value": 60.9,
                    "color": "#8fbc8f"
                },
                {
                    "label": "slice 2",
                    "value": 8.7,
                    "color": "#dadde0"
                },
                {
                    "label": "slice 3",
                    "value": 30.4,
                    "color": "#c1d82f"
                }
            ]
        }
    })
};

var svgGrabber = function() {
    return d3.select("#pieChart").html()
};

page.open(url, function (status) {
   page.evaluate(svgDrawer)
   console.log(page.evaluate(svgGrabber));
   phantom.exit();
});

这是我用来生成最终SVG的命令：

phantomjs d3_pie.js > d3_pie.svg

PhantomJS从d3渲染部分SVG输出

0 个答案: