¿Cómo usar D3 en Node.js correctamente?

Question

He estado intentando invocar D3 dentro de Node.js. He intentado en primer lugar a importar d3.v2.js del sitio web de D3 con la etiqueta script, pero después de leer este tema:

I want to run d3 from a Cakefile

Cuando el autor del D3 informa uno debe 'NPM instalar d3' ... Hice esto y puedo invocar con éxito en la consola de nodo:

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

Sin embargo, al intentar invocar desde app.js con 'nodo app.js', me sale:

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 darse cuenta de que en otros lugares, autor de D3 ha especificado claramente que uno debe requerir el lienzo:

https://github.com/mbostock/d3/blob/master/examples/node-canvas/us-counties.js

como:

var Canvas = require("canvas"); 

pero incluso entonces, (e incluso si requiere específicamente index.js en lugar de d3 .v2.js en un comunicado requerir en app.js), no puede obtener el siguiente para trabajar dentro de una plantilla de Jade:

- 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 

Answer 1

la forma correcta de utilizar D3 dentro de nodo es t o use NPM para instalar d3 y luego a require. Puede npm install d3 o utilizar un archivo package.json, seguido de npm install:

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

Una vez que tenga d3 en su directorio node_modules, cargarlo a través requieren:

var d3 = require("d3"); 

Y eso es eso.

En relación con sus otros problemas: Canvas no está obligado a utilizar D3. El ejemplo de nodo-canvas que ha vinculado requiere lienzo porque se representa en un lienzo. El TypeError (No se puede leer la propiedad 'BSON' de undefined) parece estar relacionado con su uso de mongoose/monogdb, no D3.

Answer 2

Pruebe d3-node, basado en JS-Dom. Tiene ayudantes para D3.

Answer 3

para usar con ES6 de import en lugar de require:

import * as d3 from 'd3'; 

Ésta es quizás obvio para cualquier/ES6 fácil de babel con experiencia, y sé que esto es una vieja pregunta, pero vine aquí en un intento de resolver esto. Espero que esto sea útil para alguien.

Más sobre import vs require se encuentra here.