node.js - mbostock - d3 v3 min js

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

Question

He estado intentando invocar D3 dentro de Node.js. Primero traté de importar d3.v2.js desde el sitio web de D3 con la etiqueta del script, pero luego leí este hilo:

Quiero ejecutar d3 desde un Cakefile

Cuando el autor de D3 informa que uno debe instalar ''npm d3'' ... lo hice, y puedo invocarlo con éxito en la consola del nodo:

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

Sin embargo, cuando intento invocarlo desde app.js con ''node app.js'', obtengo:

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

Me doy cuenta de que en otro lugar, el autor de D3 ha especificado claramente que uno debería 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 se requiere específicamente index.js en lugar de d3.v2.js en una declaración require en app.js), no puedo hacer que lo siguiente funcione en 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 usar D3 dentro de Node es usar NPM para instalar d3 y luego require . Puede npm install d3 o usar un archivo package.json , seguido de la npm install :

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

Una vez que tenga d3 en su directorio node_modules, cárguelo a través de require :

var d3 = require("d3");

Y eso es.

En cuanto a 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

No puedo ver por qué lo requieren. Espero que d3 trabaje en el lado del cliente después de pasar los datos a través de un socket.

Answer 3

Para usar con la import de ES6 en lugar de require :

import * as d3 from ''d3'';

Esto es quizás obvio para cualquier usuario experimentado de Babel / ES6, y sé que esta es una vieja pregunta, pero vine aquí en un intento de resolver esto. Espero que esto sea útil para alguien.

Se puede encontrar más información sobre import vs.

Answer 4

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