如何正确使用Node.js中的D3？

我一直在尝试在Node.js中调用D3。我首先尝试使用脚本标签从d3的网站导入d3.v2.js，但随后阅读了以下线程：

D3的作者建议人们应该“npm安装D3”…我这样做了，我可以在节点控制台中成功地调用它：

dpc@ananda:$ node
> var d3 = require("d3");
undefined
> d3.version;
'2.8.1' 

但是，当尝试使用“node app.js”从app.js调用它时，我得到：

node.js:201
    throw e; // process.nextTick error, or 'error' event on first tick
          ^
TypeError: Cannot read property 'BSON' of undefined
at     /Users/dpc/Dropbox/sync/Business/MindfulSound/Development/nad.am/nadam/node_modules/mongoose/node_modules/mongodb/lib/mongodb/index.js:45:44

我意识到，在其他地方，D3的作者明确规定，一个人应该需要画布：

作为：

但即便如此，（即使在app.js的require语句中特别要求index.js而不是d3.v2.js），我也无法在Jade模板中使用以下内容：

-script（'/javascripts/d3.v2.js'）
h1仪表板
section.css-table
第2节双柱
第1节.单元
格雷人力资源部
h2统计
#主图形
脚本（type=“text/javascript”）
var Canvas=需要（“画布”）；
var w=400，
h=400，
r=数学最小值（w，h）/2，
数据=d3.范围（10）.映射（数学随机）.排序（d3.降序），
颜色=d3.scale.category20（），
arc=d3.svg.arc（）.outerRadius（r），
donut=d3.layout.pie（）；
var vis=d3.选择（“主体”）.追加（“svg”）
.数据（[数据]）
.attr（“宽度”，w）
.attr（“高度”，h）；
var arcs=vis.selectAll（“g.arc”）
.数据（甜甜圈）
.enter（）.append（“g”）
.attr（“类”、“弧”）
.attr（“转换”、“翻译”（“+r+”，“+r+”））；
变量路径=弧。追加（“路径”）
.attr（“填充”，函数（d，i）{返回颜色（i）；}）；
transition（）路径
.轻松（“反弹”）
.期限（2000年）
.attrTween（“d”，tweenPie）；
transition（）路径
.ease（“弹性”）
.delay（函数（d，i）{return 2000+i*50；}）
.持续时间（750）
.attrween（“d”，tweendoot）；
函数tweenPie（b）{
b、 内半径=0；
var i=d3.interpolate（{startAngle:0，endAngle:0}，b）；
返回函数（t）{
返回弧（i（t））；
};
}
功能螺母（b）{
b、 内半径=r*.6；
var i=d3.插值（{innerRadius:0}，b）；
返回函数（t）{
返回弧（i（t））；
};
第1节.单元
格雷人力资源部
h2成就

在节点内使用D3的正确方法是使用NPM安装D3，然后使用

要求它。您可以
NPM安装D3
或使用包.json文件，然后是
NPM安装
：

{
  "name": "my-awesome-package",
  "version": "0.0.1",
  "dependencies": {
    "d3": "3"
  }
}

一旦节点_模块目录中有d3，请通过require加载它：

var d3 = require("d3");

就这样

关于您的其他问题：使用D3不需要Canvas。您链接的节点画布示例需要Canvas，因为它呈现到画布。TypeError（无法读取undefined的属性“BSON”）似乎与您对mongoose/monogdb的使用有关，而不是D3。
要与ES6的
导入
而不是
要求
一起使用：

import * as d3 from 'd3';

这对于任何有经验的babel/ES6用户来说都是显而易见的，我知道这是一个老问题，但我来这里是为了解决这个问题。希望这对其他人有所帮助

有关导入的更多信息，请参见
import
与
require
，
您需要使用纱线或npm安装jsdom。
Node.js默认情况下不支持dom，因此需要使用jsdom创建dom元素。使用d3进行除获取操作以外的所有其他操作。即d3.xml、d3.tsv

import jsdom from 'jsdom';
import * as d3 from 'd3';
const { JSDOM } = jsdom;
JSDOM.fromURL(
    'your resource url',
  ).then((dom) => {
    const doc = dom.window.document;
    const states = d3
      .select(doc)
      .select('path')
      .attr(':fme:ID');
    console.log(states);
  });

从文件创建dom

JSDOM.fromURL(
    'your resource url',
  ).then((dom) => {
    const doc = dom.window.document;
}

来自html字符串的dom

const dom = new JSDOM(
  `<p>Hello
    <img src="foo.jpg">
  </p>`,
  { includeNodeLocations: true }
);


constdom=newjsdom(
` 你好
`，
{includeNodeLocations:true}
);
谢谢你的回复！这很奇怪：d3确实在node_模块中，因为我用“npm install d3”安装了它……但是“var d3=require”（“d3”）是“in app.js给了我一个BSON错误……去掉那一行，BSON错误消失了。这是一个简单的d3使用示例，来自这里的SVG圆圈图：为了记录，我发现在mongoose和d3之间使用globals存在问题，所以首先调用d3时使用var d3=require（“d3”）；在要求mongoose之前解决了BSON错误问题。现在我在node.js中有了d3作为一个模块，如何使用它选择元素？我想在服务器上创建一个svg，并将其返回给客户端。d3.select（）可以吗以类似“”的html片段为例？这是一个容易混淆的主题，因此让我尝试帮助澄清-
npm安装d3
加载d3节点模块，该模块允许您在服务器内存中构建数据驱动的文档，以便它们可以作为预构建（呈现）传递到浏览器html/svg/等。将其与传统的d3用法进行比较，后者将库包含在html中，并在浏览器内呈现dom中的元素。客户端呈现与服务器端呈现有细微但显著的区别。另请参见：我的理解是，服务器端d3需要一个伪dom来选择（）.看看JSDOM。我觉得这篇文章很有启发性
const dom = new JSDOM(
  `<p>Hello
    <img src="foo.jpg">
  </p>`,
  { includeNodeLocations: true }
);