Comment utiliser D3 dans Node.js correctement?

j'ai essayé d'invoquer D3 à L'intérieur du noeud.js. J'ai tout d'abord essayé d'importer d3.v2.js du site de D3 avec la balise script, mais alors lire ce fil:

je veux exécuter d3 à partir d'un fichier Cakef

où L'auteur de D3 conseille d'installer d3...J'ai fait cela, et je peux l'invoquer avec succès dans la console de noeud:

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

Toutefois, lorsque vous essayez de l'appeler à partir de l'app.js avec " nœud App.js', j'obtiens:

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

je me rends compte qu'ailleurs, L'auteur de D3 a clairement spécifié qu'il fallait avoir la toile:

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

:

var Canvas = require("canvas");

mais même alors, (et même si l'on exige spécifiquement index.js au lieu de d3.v2.js dans un besoin de déclaration en application.js), je ne peux pas obtenir le ci-dessous pour travailler dans un modèle 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
32
demandé sur Community 2012-03-30 22:14:29

4 réponses

la bonne façon d'utiliser D3 à L'intérieur d'un noeud est d'utiliser NPM pour installer d3 et ensuite require it. Vous pouvez soit npm install d3 ou utiliser un .JSON file, suivi de npm install :

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

une fois que vous avez d3 dans votre répertoire node_modules, chargez-le via require :

var d3 = require("d3");

Et c'est tout.

en ce qui concerne vos autres questions: Canvas n'est pas nécessaire de utilisez D3. L'exemple noeud-canvas que vous avez lié nécessite canvas parce qu'il renvoie à une canvas. La typographie (ne peut pas lire la propriété "BSON" de non défini) semble liée à votre utilisation de mongoose / monogdb, pas de D3.

64
répondu mbostock 2013-06-08 13:34:11

à utiliser avec ES6 import au lieu de require :

import * as d3 from 'd3';

c'est peut-être évident pour tout utilisateur babel/ES6 expérimenté, et je sais que c'est une vieille question, mais je suis venu ici pour essayer de comprendre cela. Espérons que cela est utile pour quelqu'un.

plus sur import vs. require se trouve ici.

3
répondu Thomas Fauskanger 2017-05-23 11:47:18

Essayer d3-nœud , construit sur JS-Dom. Il a des assistants pour D3.

1
répondu in code veritas 2016-08-18 02:29:54

Je ne vois pas pourquoi je l'exige. Je m'attends à ce que d3 travaille du côté du client après avoir passé les données, disons une socket.

0
répondu Victor Behar 2018-05-23 08:16:24