我一直试图在Node.js中调用D3。我首先尝试使用脚本标记从D3的网站导入d3.v2.js,但随后阅读了这个帖子:
I want to run d3 from a Cakefile
D3的作者建议,应该安装d3' ...我这样做了,我可以在节点控制台中成功调用它:
dpc@ananda:$ node
> var d3 = require("d3");
undefined
> d3.version;
'2.8.1'
然而,当尝试使用&节点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的作者已明确指出应该要求画布:
https://github.com/mbostock/d3/blob/master/examples/node-canvas/us-counties.js
为:
var Canvas = require("canvas");
但即便如此,(即使在app.js中的require语句中特别需要index.js而不是d3.v2.js),我也无法在Jade模板中使用以下内容:< / p>
- script('/javascripts/d3.v2.js')
h1 Dashboard
section.css-table
section.two-column
section.cell
hr.grey
h2 Statistics
#mainGraph
script(type="text/javascript")
var Canvas = require("canvas");
var w = 400,
h = 400,
r = Math.min(w, h) / 2,
data = d3.range(10).map(Math.random).sort(d3.descending),
color = d3.scale.category20(),
arc = d3.svg.arc().outerRadius(r),
donut = d3.layout.pie();
var vis = d3.select("body").append("svg")
.data([data])
.attr("width", w)
.attr("height", h);
var arcs = vis.selectAll("g.arc")
.data(donut)
.enter().append("g")
.attr("class", "arc")
.attr("transform", "translate(" + r + "," + r + ")");
var paths = arcs.append("path")
.attr("fill", function(d, i) { return color(i); });
paths.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie);
paths.transition()
.ease("elastic")
.delay(function(d, i) { return 2000 + i * 50; })
.duration(750)
.attrTween("d", tweenDonut);
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) {
return arc(i(t));
};
}
function tweenDonut(b) {
b.innerRadius = r * .6;
var i = d3.interpolate({innerRadius: 0}, b);
return function(t) {
return arc(i(t));
};
section.cell
hr.grey
h2 Achievements
答案 0 :(得分:65)
在Node中使用D3的正确方法是使用NPM安装d3,然后安装到require
。您可以npm install d3
或使用 package.json 文件,然后使用npm install
:
{
"name": "my-awesome-package",
"version": "0.0.1",
"dependencies": {
"d3": "3"
}
}
在node_modules目录中有d3后,通过 require 加载它:
var d3 = require("d3");
就是这样。
关于您的其他问题:Canvas不需要使用D3。您链接的节点画布示例需要画布,因为它渲染到画布。 TypeError(无法读取未定义的属性'BSON')似乎与您使用mongoose / monogdb有关,而不是D3。
答案 1 :(得分:5)
与ES6 import
而不是require
一起使用:
import * as d3 from 'd3';
对于任何有经验的babel / ES6用户来说,这可能是显而易见的,我知道这是一个老问题,但我来到这里试图解决这个问题。希望这对某人有帮助。
找到import
与require
的更多内容here.
答案 2 :(得分:2)
尝试使用JS-Dom构建的d3-node。有D3的助手。
答案 3 :(得分:0)
我看不出为什么需要它。我希望d3在通过套接字传递数据后在客户端工作。
答案 4 :(得分:0)
您需要使用yarn或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字符串的域
const dom = new JSDOM(
`<p>Hello
<img src="foo.jpg">
</p>`,
{ includeNodeLocations: true }
);