Как правильно использовать D3 в Node.js?

Question

Я пытался вызвать D3 в Node.js. Я пытался, во-первых, чтобы импортировать d3.v2.js с сайта D3 с тэгом, а затем прочитать эту тему:

I want to run d3 from a Cakefile

Где автор D3 советует один должен «NPM установить d3» ... Я сделал это , и я могу успешно вызвать его в консоли узла:

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

Однако при попытке вызвать его из app.js с 'узлом app.js', я получаю:

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 понимать, что в другом месте, автор D3 имеет четко указано, что следует требовать от холста:

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

как:

var Canvas = require("canvas"); 

, но даже тогда, (и даже если конкретно требует index.js вместо d3 .v2.js в заявлении требуют в app.js), я не могу получить ниже, чтобы работать в шаблоне Джейд:

- 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

правильный способ использовать D3 в Узел т o использовать NPM для установки d3, а затем до require. Вы можете npm install d3 или использовать package.json файл, а затем npm install:

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

После того как вы d3 в каталоге node_modules, загрузите его через требуют:

var d3 = require("d3"); 

И это Это.

Что касается других проблем: Canvas не требуется использовать D3. Приведенный вами пример холста-холста требует холста, потому что он отображает на холст. TypeError (Невозможно прочитать свойство BSON undefined), по-видимому, связано с вашим использованием mongoose/monogdb, а не с D3.

Answer 2

Попробуйте d3-node, построенный на JS-Dom. Имеет помощников для D3.

Answer 3

Для использования с ES6-х import вместо require:

import * as d3 from 'd3'; 

Это, пожалуй, очевидно любому опытному Бабель/ES6 пользователя, и я знаю, что это старый вопрос, но я пришел сюда в попытке выяснить это. Надеюсь, это полезно для кого-то.

Подробнее о import VS. require найден here.