如何在node.js中运行d3-cloud

Question

我正在尝试让来自d3-cloud的node.js示例正常工作。

我检查了这个项目

git clone https://github.com/jasondavies/d3-cloud

然后在该目录中：

npm install

这似乎很管用。

然后：

$ node examples/node.js 
internal/modules/cjs/loader.js:803
    throw err;
    ^

Error: Cannot find module 'canvas'
Require stack:
- /private/tmp/fff/d3-cloud/examples/node.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:800:15)
    at Function.Module._load (internal/modules/cjs/loader.js:693:27)
    at Module.require (internal/modules/cjs/loader.js:864:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/private/tmp/fff/d3-cloud/examples/node.js:1:14)
    at Module._compile (internal/modules/cjs/loader.js:971:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10)
    at Module.load (internal/modules/cjs/loader.js:822:32)
    at Function.Module._load (internal/modules/cjs/loader.js:730:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1051:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/private/tmp/fff/d3-cloud/examples/node.js' ]

我试过了：

npm install canvas

这就成功了。

然后我又运行了一次：

$ node examples/node.js 
/private/tmp/fff/d3-cloud/examples/node.js:11
    .canvas(function() { return new Canvas(1, 1); })
                                ^

TypeError: Canvas is not a constructor
    at /private/tmp/fff/d3-cloud/examples/node.js:11:33
    at Object.cloud.start (/private/tmp/fff/d3-cloud/build/d3.layout.cloud.js:34:38)
    at Object.<anonymous> (/private/tmp/fff/d3-cloud/examples/node.js:18:6)
    at Module._compile (internal/modules/cjs/loader.js:971:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10)
    at Module.load (internal/modules/cjs/loader.js:822:32)
    at Function.Module._load (internal/modules/cjs/loader.js:730:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1051:12)
    at internal/main/run_main_module.js:16:11

我不是一个节点人员，所以我有点被困在这里了。readme中有一个节点，但我不确定如何对其执行操作：

# canvas([canvas])

If specified, sets the canvas generator function, which is used internally to draw text. If not specified, returns the current generator function, which defaults to:

function() { return document.createElement("canvas"); }

When using Node.js, you will almost definitely override this default, e.g. using the canvas module.

Answer 1

d3-cloud的最后一次提交至少是在3年前，通过搜索"Canvas不是一个构造器“，我在node-canvas插件的存储库中找到了this Github issue。这个问题是2017年9月的，也是3年前的事了。

大约在那个时候，canvas发布了他们的2.0.0版本，其中their changelog读取

// (1) The Canvas constructor is no longer the default export from the module.
/* old: */
const Canvas = require('canvas')
const mycanvas = new Canvas(width, height)
/* new: */
const { createCanvas, Canvas } = require('canvas')
const mycanvas = createCanvas(width, height)
mycanvas instanceof Canvas // true

所以我猜你需要安装1.6.9版本，这是他们1.x分支中的最新版本。

这些问题经常出现，尤其是在使用较旧的库时。以d3为例，它现在的版本是6.x，但有很多活跃的程序员使用3.x甚至2.x。有各种教程和示例，但API在此期间发生了很大变化，阅读发行说明对于匹配所有这些版本是必不可少的。希望现在你知道该去哪里找了！

Answer 2

我认为你的import语句是错误的。您必须导入Canvas类。这对我很有效。该实现引用自https://github.com/jasondavies/d3-cloud/blob/master/examples/node.js和https://github.com/jasondavies/d3-cloud/issues/144。

const fs = require('fs')
const { Canvas } = require('canvas')
const cloud = require('d3-cloud')

const words = ["Hello", "world", "normally", "you", "want", "more", "words", "than", "this"]
  .map(function (d) {
    return {
      text: d,
      size: 10 + Math.random() * 90
    }
  })

cloud().size([960, 500])
  .canvas(function() {
    return new Canvas(1, 1)
  })
  .words(words)
  .padding(5)
  .rotate(function () {
    return ~~(Math.random() * 2) * 90;
  })
  .font("Impact")
  .fontSize(function (d) {
    return d.size;
  })
  .on("end", draw)
  .start()

function draw(words, bounds) {
  const { x: width, y: height } = bounds[1]
  
  const canvas = new Canvas(width, height, 'png')
  const ctx = canvas.getContext('2d')
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'

  for (let word of words) {
    ctx.font = `${word.size}px ${word.font}`
    ctx.fillText(word.text, (width / 2) + word.x, (height / 2) + word.y)
  }

  fs.writeFileSync('out.png', canvas.toBuffer())
}