Jak poprawnie używać D3 w Node.js?

Question

Próbowałem wywołać D3 w Node.js. Próbowałem najpierw importować d3.v2.js ze strony D3 z tagu skryptu, ale następnie przeczytać ten wątek:

I want to run d3 from a Cakefile

Gdzie autor D3 radzi należy „npm zainstalować d3” ... Zrobiłem to i mogę skutecznie powołać go w konsoli węzła:

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

jednak gdy próbuje wywołać go z app.js z 'węzeł app.js', otrzymuję:

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 uświadomić sobie, że gdzie indziej, autor D3 ma jasno określone, że należy wymagać kanwie:

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

jak:

var Canvas = require("canvas"); 

ale nawet wtedy (a nawet jeśli specjalnie wymagająca index.js zamiast d3 .v2.js w oświadczeniu wymaganie app.js), nie mogę dostać poniżej pracować w szablonie 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

poprawny sposób używać D3 obrębie węzła jest t o użyj NPM do instalacji d3, a następnie do require go. Można npm install d3 lub użyć package.json plik, a następnie npm install:

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

Gdy masz d3 w katalogu node_modules, załadować go poprzez wymagają:

var d3 = require("d3"); 

I to to.

Odnośnie do innych problemów: płótno nie jest wymagane do używania D3. Powiązany przykład węzła-obszaru roboczego wymaga płótna, ponieważ renderuje się do obszaru roboczego. The TypeError (Nie można odczytać właściwości "BSON" niezdefiniowanej) wydaje się być związany z twoim użyciem mangusta/monogdb, a nie D3.

Answer 2

Wypróbuj d3-node, zbudowany na JS-Dom. Ma pomocników dla D3.

Answer 3

Aby korzystać z ES6 na import zamiast require:

import * as d3 from 'd3'; 

To jest chyba oczywiste dla każdego doświadczonego Babel/ES6 użytkownika, i wiem, że to jest stare pytanie, ale ja przyszedłem tutaj w próbie wymyśl to. Mam nadzieję, że jest to pomocne dla kogoś.

Więcej na import vs. require znajduje here.