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

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

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

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

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

но даже тогда (и даже если для d3v2.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

Ответ 1

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

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

Как только у вас есть d3 в каталоге node_modules, загрузите его с помощью require:

var d3 = require("d3");

И что это.

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

Ответ 2

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

import * as d3 from 'd3';

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

Подробнее о import vs. require найдено здесь.

Ответ 3

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

Ответ 4

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

Ответ 5

Вам нужно установить 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);
  });

создавая дом из файла

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

Дом из строки HTML

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