Wie benutze ich D3 in Node.js richtig?

Question

Ich habe versucht, D3 innerhalb Node.js aufzurufen. Ich versuchte zunächst d3.v2.js von D3 Webseite mit dem Script-Tag zu importieren, aber dann diesen Thread gelesen:

I want to run d3 from a Cakefile

Wo D3 des Autors rät man sollte ‚npm ​​d3 installieren‘ ... Ich tat dies, , und ich kann es in Knoten Konsole erfolgreich aufrufen:

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

wenn es jedoch aus app.js aufzurufen versuchen, mit 'Knoten app.js', die ich erhalten:

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 erkennen, dass an anderer Stelle, D3 des Autors hat eindeutig festgelegt, dass man die Leinwand benötigen sollte:

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

als:

var Canvas = require("canvas"); 

aber selbst dann (und auch wenn speziell erfordern index.js statt d3 .v2.js in einer Erklärung bedürfen in app.js), kann ich nicht bekommen die unten in einem Jade-Vorlage zu arbeiten:

- 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

der richtige Weg, D3 zu verwenden innerhalb von Knoten t o Verwenden Sie NPM, um d3 und dann zu require es zu installieren. Sie können entweder npm install d3 oder eine package.json-Datei verwenden, gefolgt von npm install:

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

Sobald Sie d3 in Ihrem node_modules Verzeichnis haben, es laden über erfordern:

var d3 = require("d3"); 

Und das ist es.

In Bezug auf Ihre anderen Probleme: Canvas ist nicht erforderlich, um D3 zu verwenden. Das von Ihnen verknüpfte node-canvas-Beispiel erfordert canvas, da es auf einer Arbeitsfläche gerendert wird. Der TypeError (Eigenschaft 'BSON' von undefined nicht lesen) scheint mit Ihrer Verwendung von mongoose/monogdb und nicht mit D3 in Zusammenhang zu stehen.

Answer 2

Versuchen Sie d3-node, auf JS-Dom gebaut. Hat Helfer für D3.

Answer 3

Um mit ES6 der Verwendung import statt require:

import * as d3 from 'd3'; 

Dies ist vielleicht offensichtlich einen erfahrener babel/ES6-Benutzer, und ich weiß, das ist eine alte Frage, aber ich kam hier in einem Versuch, finde es heraus. Ich hoffe, das ist hilfreich für jemanden.

Mehr auf import vs. require ist here.