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

Question

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

Я хочу запустить d3 из Cakefile

Там, где автор 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");

но даже тогда (и даже если для d3v.js в заявке require в app.js требуется файл index.js вместо d3.v2.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

Answer 1

Правильный способ использования D3 в узле - использовать 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.Пример узла-холста, который вы связали, требует canvas, потому что он рендерится на canvas.Ошибка TypeError (Не удается прочитать свойство 'BSON' из неопределенного), по-видимому, связана с использованием вами mongoose / monogdb, а не D3.

Answer 2

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

import * as d3 from 'd3';

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

Больше о import против require найдено здесь.

Answer 3

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

Answer 4

Вам необходимо установить jsdom, используя пряжу или npm.Node.js по умолчанию не поддерживает dom, поэтому необходимо использовать jsdom для создания элементов dom.Используйте 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;
}

dom из строки html

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

Answer 5

Не понимаю, зачем это нужно.Я ожидаю, что d3 будет работать на стороне клиента после передачи данных, скажем, через сокет.