web-dev-qa-db-ja.com

Node.jsでD3を適切に使用するには？

Node.js内でD3を呼び出そうとしています。最初に、スクリプトタグを使用してD3のWebサイトからd3.v2.jsをインポートしようとしましたが、次のスレッドを読みました。

Cakefileからd3を実行したい

D3の作者が「npm install d3」をすべきだとアドバイスしているところで...私はこれを行い、ノードコンソールで正常に呼び出すことができます：

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

ただし、app.jsから「node 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");

しかし、それでも（そして、app.jsのrequireステートメントでd3.v2.jsの代わりにindex.jsを特に必要としても）、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
node.jsd3.js
37
pland

Node内でD3を使用する正しい方法は、NPMを使用してd3をインストールし、requireにインストールすることです。_npm install d3_またはpackage.jsonファイル、その後に_npm install_が続きます：

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

Node_modulesディレクトリにd3を配置したら、requireでロードします。

_var d3 = require("d3");
_

以上です。

その他の問題に関して：D3を使用するためにCanvasは必要ありません。リンクしたノードキャンバスの例では、キャンバスにレンダリングされるため、キャンバスが必要です。 TypeError（未定義のプロパティ 'BSON'を読み取れません）は、D3ではなくmongoose/monogdbの使用に関連しているようです。

65
mbostock

importの代わりにES6のrequireで使用するには：

import * as d3 from 'd3';

これはおそらく経験豊富なbabel/ES6-userにとって明らかであり、これは古い質問であることは知っていますが、私はこれを理解しようとしてここに来ました。これが誰かに役立つことを願っています。

importとrequireの詳細が見つかりました こちら

5
Thomas Fauskanger

JS-Dom上に構築された d3-node を試してください。 D3のヘルパーがあります。

2
Learning stats by example

Yarnまたはnpmを使用してjsdomをインストールする必要があります。 Node.jsはデフォルトではdomをサポートしていないため、dom要素を作成するためにjsdomを使用する必要があります。フェッチ操作を除く他のすべての操作にはd3を使用します。つまり、d3.xml、d3.tsv

import jsdom from 'jsdom';
import * as d3 from 'd3';
const { JSDOM } = jsdom;
JSDOM.fromURL(
    'your resource url',
  ).then((dom) => {
    const doc = dom.window.document;
    const states = d3
      .select(doc)
      .select('path')
      .attr(':fme:ID');
    console.log(states);
  });

ファイルからdomを作成する

JSDOM.fromURL(
    'your resource url',
  ).then((dom) => {
    const doc = dom.window.document;
}

hTML文字列のdom

const dom = new JSDOM(
  `<p>Hello
    <img src="foo.jpg">
  </p>`,
  { includeNodeLocations: true }
);
0
Joma sim