gpt4 book ai didi

d3.js - 在 PhantomJS 中返回 d3 SVG HTML

转载 作者:行者123 更新时间:2023-12-01 14:03:09 25 4
gpt4 key购买 nike

我正在使用 PhantomJS + d3 在服务器上呈现 SVG。我能够返回整个页面主体的 HTML,其中包含 d3 创建的 SVG,但如果我尝试仅返回 SVG,那么我会返回 null .

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

page.includeJs('http://d3js.org/d3.v3.min.js', function() {
var html = page.evaluate(function() {
var body = d3.select('body');
var svg = body.append('svg');
svg.append('rect');
svg.append('circle');
return body.html();
});
console.log(html);
phantom.exit();
});

返回 <script src="http://d3js.org/d3.v3.min.js"></script><svg><rect></rect><circle></circle></svg> .

但是如果我改变return body.html()return svg.html() , null被退回。

我正在使用 PhantomJS 1.9.8 和 d3.v3.js。关于为什么我不能只选择 svg 的任何想法?

最佳答案

实际上,我现在可以回答我自己的问题了:SVG 不支持 innerHTML,所以 d3 的 .html() 将不起作用。来自d3 wiki :

Note: as its name suggests, selection.html is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with selection.html. Consider using XMLSerializer to convert a DOM subtree to text. See also the innersvg polyfill, which provides a shim to support the innerHTML property on SVG elements.

使用 XMLSerializer 解决了这个问题:

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

page.includeJs('http://d3js.org/d3.v3.min.js', function() {
var html = page.evaluate(function() {
var body = d3.select('body');
var svg = body.append('svg');
svg.append('rect');
svg.append('circle');
var s = new XMLSerializer();
return s.serializeToString(document.querySelector('svg'));
});
console.log(html);
phantom.exit();
});

关于d3.js - 在 PhantomJS 中返回 d3 SVG HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32159732/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com