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
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.
à 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.
Essayer d3-nœud , construit sur JS-Dom. Il a des assistants pour D3.
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.