web-dev-qa-db-fra.com

Comment utiliser correctement D3 dans Node.js?

J'ai essayé d'invoquer D3 dans Node.js. J'ai d'abord essayé d'importer d3.v2.js depuis le site Web de D3 avec la balise script, mais j'ai ensuite lu ce fil:

je veux lancer d3 depuis un Cakefile

Là où l'auteur de D3 conseille de "npm installer d3" ... je l'ai fait, 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'

Cependant, lorsque j'essaie de l'invoquer depuis app.js avec 'node 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 précisé que l'on devrait exiger la toile:

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

comme:

var Canvas = require("canvas");

mais même dans ce cas (et même si cela nécessite spécifiquement index.js au lieu de d3.v2.js dans une instruction require dans app.js), je ne peux pas faire fonctionner le ci-dessous 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
node.jsd3.js
37
pland

La façon correcte d'utiliser D3 dans Node est d'utiliser NPM pour installer d3 puis require. Vous pouvez soit npm install d3 ou utilisez un fichier package.json, 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.

Concernant vos autres problèmes: Canvas n'est pas requis pour utiliser D3. L'exemple de nœud de canevas que vous avez lié nécessite un canevas car il se transforme en canevas. La TypeError (Impossible de lire la propriété "BSON" de non défini) semble être liée à votre utilisation de mangouste/monogdb, pas D3.

65
mbostock

Pour utiliser avec import d'ES6 au lieu de require:

import * as d3 from 'd3';

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

Plus d'informations sur import vs require se trouve ici.

5
Thomas Fauskanger

Essayez d3-node , construit sur JS-Dom. A des assistants pour D3.

2
Learning stats by example

Vous devez installer jsdom en utilisant yarn ou npm. Node.js ne prend pas en charge dom par défaut, d'où la nécessité d'utiliser jsdom pour créer des éléments dom. Utilisez d3 pour toutes les autres manipulations à l'exception des opérations de récupération. c'est-à-dire d3.xml, d3.tsv

import jsdom from 'jsdom';
import * as d3 from 'd3';
const { JSDOM } = jsdom;
JSDOM.fromURL(
    'your resource url',
  ).then((dom) => {
    const doc = dom.window.document;
    const states = d3
      .select(doc)
      .select('path')
      .attr(':fme:ID');
    console.log(states);
  });

création de dom à partir d'un fichier

JSDOM.fromURL(
    'your resource url',
  ).then((dom) => {
    const doc = dom.window.document;
}

dom à partir de la chaîne html

const dom = new JSDOM(
  `<p>Hello
    <img src="foo.jpg">
  </p>`,
  { includeNodeLocations: true }
);
0
Joma sim