如何正確使用Node.js中的D3？

我一直試圖在Node.js中調用D3。我想首先從D3的網站上的腳本代碼中導入d3.v2.js，但後來閱讀此線程：如何正確使用Node.js中的D3？

凡D3的作者建議人們應該「故宮安裝D3」 ...我這樣做，我可以成功地調用它在節點控制檯：

[email protected]:$ 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

我認識到別處，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

來源

2012-03-30 pland

正確的方式使用D3內節點爲t o使用NPM安裝d3，然後使用require它。您可以npm install d3或使用的package.json文件，然後npm install：

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

一旦你在你的node_modules目錄有D3，加載它通過需要：

var d3 = require("d3");

而這它。

關於您的其他問題：畫布不需要使用D3。您鏈接的節點畫布示例需要畫布，因爲它呈現給畫布。 TypeError（無法讀取未定義的屬性'BSON'）似乎與您使用mongoose/monogdb而不是D3有關。

來源

2012-03-30 19:28:05 mbostock

感謝您的答覆！這很奇怪：因爲我使用'npm install d3'來安裝d3，但是'var d3 = require（「d3」）;'在app.js給我那個BSON錯誤...刪除該行，BSON錯誤消失了。這是一個更簡單的d3使用示例，來自SVG圈子在這裏畫圖：http：// christopheviau。com/d3_tutorial/ – pland 2012-03-30 22:44:34

爲了記錄，發現在mongoose和d3之間使用全局變量時存在問題，因此首先使用var d3 = require（「d3」）調用d3。在要求貓鼬解決BSON錯誤問題之前。 – pland 2012-04-02 09:08:52

這已在BSON v0.1.5（和mongodb v2.0.0，這取決於正確的BSON版本）中得到修復。 – 2012-11-13 21:00:11

嘗試d3-node，建立在JS-Dom上。有D3的助手。

來源

2016-08-18 02:29:54

要使用ES6的import而不是require使用：

import * as d3 from 'd3';

這或許是顯而易見的任何有經驗的通天塔/ ES6用戶，我知道這是一個老問題，但我來到這裏，企圖想出解決辦法。希望這對某人有幫助。

更多關於import與require發現here.

來源

2016-10-11 17:39:24

如何正確使用Node.js中的D3？

回答

相關問題