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

问题描述

我一直在尝试在Node.js中调用D3。我尝试首先从D3的网站导入d3.v2.js与脚本标签，但然后读取此线程：

想从Cakefile运行d3

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

  dpc @ ananda： $ node 
> var d3 = require（d3）; 
 undefined 
> d3.version; 
'2.8.1'
  

但是，当试图从app.js调用它时'node app.js'，我得到：

  node.js：201 
 throw e; // process.nextTick错误或第一个tick的错误事件
 ^ 
 TypeError：无法读取/ user / dpc / Dropbox / sync / Business /下的未定义
的属性'BSON' 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

as：

  var Canvas = require （帆布）; 
  

但即使如此，即使特别需要index.js而不是d3.v2.js在app.js中的require语句），我不能得到下面的工作在一个Jade模板：

   -  script（'/ javascripts / d3.v2.js'）
 h1仪表板
 section.css-table 
 section.two-column 
 section.cell 
 hr.grey 
 h2统计
 #mainGraph 
脚本（type =text / javascript）
 var Canvas = require（canvas）; 
 var w = 400，
h = 400，
r = Math.min（w，h）/ 2，
 data = d3.range ）.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 ，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成就
  

require 它。您可以 npm install d3 或使用 package.json 文件，然后按 npm install ：

  {
name：my-awesome-package，
version ：0.0.1，
dependencies：{
d3：3
} 
} 
  pre> 
 
 
在node_modules目录中有d3之后，通过 require 加载它：
  var d3 = require（d3）; 
  
就是这样。
 
 
 
其他问题：Canvas不需要使用D3。您链接的节点画布示例需要画布，因为它呈现为画布。 TypeError（无法读取属性'BSON'未定义）似乎与您使用mongoose / monogdb，而不是D3相关。
 
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:

Wanna run d3 from a Cakefile

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' 
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
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

as:
var Canvas = require("canvas");
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

解决方案
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"
  }
}
Once you have d3 in your node_modules directory, load it via require:
var d3 = require("d3");
And that's it.

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.

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