Làm thế nào để sử dụng D3 trong Node.js đúng cách?

Question

Tôi đã cố gắng gọi D3 trong Node.js. Tôi cố gắng trước hết phải nhập khẩu d3.v2.js từ website D3 với thẻ kịch bản, nhưng sau đó đọc chủ đề này:

I want to run d3 from a Cakefile

đâu tác giả D3 của khuyên ta nên 'NPM cài đặt d3' ... Tôi đã làm điều này , và tôi thành công có thể gọi nó ở nút điều khiển:

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

Tuy nhiên, khi cố gắng gọi nó từ app.js với 'nút app.js', tôi nhận được:

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 

tôi nhận ra rằng ở những nơi khác, tác giả D3 đã quy định rõ ràng rằng ta nên yêu cầu vải:

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

như:

var Canvas = require("canvas"); 

nhưng thậm chí sau đó, (và thậm chí nếu cần đặc biệt index.js thay vì d3 .v2.js trong một tuyên bố yêu cầu trong app.js), tôi không thể có được bên dưới để làm việc trong một mẫu 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

Cách chính xác để sử dụng D3 trong Node là t o sử dụng NPM để cài đặt d3 và sau đó là require. Bạn có thể npm install d3 hoặc sử dụng một package.json tập tin, tiếp theo là npm install:

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

Một khi bạn có d3 trong thư mục node_modules của bạn, tải nó qua đòi hỏi:

var d3 = require("d3"); 

Và đó là nó.

Về các vấn đề khác của bạn: Canvas không bắt buộc phải sử dụng D3. Ví dụ về nút-canvas mà bạn đã liên kết yêu cầu canvas vì nó hiển thị cho canvas. TypeError (Không thể đọc thuộc tính 'BSON' không xác định) có vẻ liên quan đến việc bạn sử dụng mongoose/monogdb, chứ không phải D3.

Answer 2

Hãy thử d3-node, được xây dựng trên JS-Dom. Có những người giúp đỡ cho D3.

Answer 3

Để sử dụng với ES6 của import thay vì require:

import * as d3 from 'd3'; 

Đây có lẽ là hiển nhiên đối với bất kỳ babel có kinh nghiệm/ES6 người dùng, và tôi biết đây là một câu hỏi cũ, nhưng tôi đến đây trong một nỗ lực để hiểu ra điều này. Hy vọng điều này là hữu ích cho một ai đó.

Thông tin thêm về import vs require được tìm thấy here.