jsdom.env不是将svg导出到图像的函数 [英] jsdom.env is not a function exporting svg to image
问题描述
我正在尝试根据以下教程将d3 svg图像转换为图像: https://github.com/hugolpz/svgcreator.node.js
I am trying to convert a d3 svg image to an image based on the following tutorial: https://github.com/hugolpz/svgcreator.node.js
我安装以下语句:
sudo npm install -g jsdom d3js
npm install jsdom d3js
node svgcreator.node.js > out.svg
我使用了以下代码
var jsdom = require('jsdom');
jsdom.env(
"<html><body></body></html>", // CREATE DOM HOOK
[ 'http://d3js.org/d3.v3.min.js', // JS DEPENDENCIES online ...
'js/d3.v3.min.js' ], // ... & local-offline
function (err, window) {
// D3JS CODE * * * * * * * * * * * * * * * * * * * * * * * *
var svg = window.d3.select("body")
.append("svg")
.attr("width", 100)
.attr("height", 100);
svg.append("rect")
.attr("id", "rect1")
.attr("x", 10)
.attr("y", 10)
.attr("width", 80)
.attr("height", 80)
.style("fill", "green");
// END (D3JS) * * * * * * * * * * * * * * * * * * * * * * * *
//PRINTING OUT SELECTION
console.log( window.d3.select("body").html() );
} // end function
);
当我执行 node svgcreator.node.js>时out.svg 我遇到以下错误
When i execute node svgcreator.node.js > out.svg i get the following error
TypeError: jsdom.env is not a function
at Object.<anonymous> (C:\Users\ErikvanderHoeven\Documents\git\svgcreator.node.js\svgcreator.node.js:5:7)
?[90m at Module._compile (internal/modules/cjs/loader.js:1063:30)?[39m
?[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)?[39m
?[90m at Module.load (internal/modules/cjs/loader.js:928:32)?[39m
?[90m at Function.Module._load (internal/modules/cjs/loader.js:769:14)?[39m
?[90m at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)?[39m
?[90m at internal/main/run_main_module.js:17:47?[39
推荐答案
似乎您有一个依赖版本问题-Github项目中的代码已经使用了好几年，并且指令加载的依赖版本要比当前版本高得多.编写示例代码.
It seems you have a dependency version issue - the code in the Github project is several years old and the instructions are loading much later versions of the dependencies than when the example code was written.
我在尝试安装 d3js 时发现npm错误，并且 jsdom 在v16.4上.如果我运行:
I get an npm error trying to install d3js and jsdom is on v16.4. If I run:
npm install jsdom d3 --save
我的 package.json 是:
{
"name": "test-jsdom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"d3": "^6.5.0",
"jsdom": "^16.4.0"
}
}
Github用户 dam1r89 显示了一种在此
Github user dam1r89 shows a way to do what you are trying on later versions in this gist.
我的看法:
const d3 = require("d3");
const fs = require("fs");
const {JSDOM} = require("jsdom");
// init d3 - https://gist.github.com/tomgp/c99a699587b5c5465228
const minHtml = "<html><head></head><body></body></html>";
const dom = new JSDOM(`${minHtml}`, { pretendToBeVisual: true });
const window = dom.window;
window.d3 = d3.select(window.document);
// D3JS CODE * * * * * * * * * * * * * * * * * * * * * * * *
var svg = window.d3.select("body")
.append("svg")
.attr("width", 100)
.attr("height", 100);
svg.append("rect")
.attr("id", "rect1")
.attr("x", 10)
.attr("y", 10)
.attr("width", 80)
.attr("height", 80)
.style("fill", "green");
// END (D3JS) * * * * * * * * * * * * * * * * * * * * * * * *
console.log( window.d3.select("body").html() );
哪个输出:
<svg width="100" height="100"><rect id="rect1" x="10" y="10" width="80" height="80" style="fill: green;"></rect></svg>
这篇关于jsdom.env不是将svg导出到图像的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
