jsdom.env 不是将 svg 导出到图像的函数

Question

我正在尝试根据以下教程将 d3 svg 图像转换为图像：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 我得到以下错误

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

Answer 1

您似乎遇到了依赖版本问题 - Github 项目中的代码已有数年历史，并且说明加载的依赖版本比编写示例代码时要晚得多。

我在尝试安装 d3js 时遇到 npm 错误，而 jsdom 在 v16.4 上。如果我运行:

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 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 导出到图像的函数

jsdom.env is not a function exporting svg to image

node.js

jsdom

d3.js