如何在 Node.js 中正确使用 D3? [英] How to use D3 in Node.js properly?

问题描述

我一直在尝试在 Node.js 中调用 D3.我首先尝试使用 script 标签从 D3 的网站导入 d3.v2.js，但随后阅读了此线程:

I've been trying to invoke D3 within Node.js. I tried firstly to import d3.v2.js from D3's website with the script tag, but then read this thread:

我想从 Cakefile 运行 d3

D3 的作者建议应该'npm install d3'...我这样做了，我可以在节点控制台中成功调用它:

Where D3's author advises one should 'npm install d3'...I did this, and I can successfully invoke it in node console:

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

但是，当尝试从 app.js 中使用node app.js"调用它时，我得到:

However, when trying to invoke it from app.js with 'node app.js', I get:

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 的作者已经明确指出应该需要画布:

I realise that elsewhere, D3's author has clearly specified that one should require the canvas:

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 模板中使用以下内容:

but even then, (and even if specifically requiring index.js instead of d3.v2.js in a require statement in app.js), I can't get the below to work within a Jade template:

- 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

推荐答案

在 Node 中使用 D3 的正确方法是使用 NPM 安装 d3，然后require它.您可以 npm install d3 或使用 package.json 文件，然后使用 npm install:

The correct way to use D3 within Node is to use NPM to install d3 and then to require it. You can either npm install d3 or use a package.json file, followed by npm install:

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

在 node_modules 目录中有 d3 后，通过 require 加载它:

Once you have d3 in your node_modules directory, load it via require:

var d3 = require("d3");

就是这样.

关于您的其他问题:使用 D3 不需要 Canvas.您链接的节点画布示例需要画布，因为它渲染到画布.TypeError(无法读取未定义的属性BSON")似乎与您使用 mongoose/monogdb 而不是 D3 有关.

Regarding your other issues: Canvas is not required to use D3. The node-canvas example you linked requires canvas because it renders to a canvas. The TypeError (Cannot read property 'BSON' of undefined) appears to be related to your use of mongoose / monogdb, not D3.

这篇关于如何在 Node.js 中正确使用 D3?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！