我想从 Cakefile 运行 d3

2022-01-24 00:00:00 d3.js javascript coffeescript jsdom

我想从命令行执行一些 d3 代码.最初我只是尝试了类似的东西:

I'd like to execute some d3 code from the command line. Initially I just tried something like:

task 'data', 'Build some data with d3', ->
      d3 = require('lib/d3.v2')
      console.log "d3 version = "+ d3.version

但这没有用.我遇到了这样的错误:

But this didn't work. I got errors like this:

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
          ^
ReferenceError: CSSStyleDeclaration is not defined
    at /Users/mydir/Documents/classes/middleclass/app/lib/d3.min.js:1:21272
    at Object.<anonymous> (/Users/mydir/Documents/classes/middleclass/app/lib/d3.min.js:2:25395)
    at Module._compile (module.js:432:26)
    at Object..js (module.js:450:10)
    at Module.load (module.js:351:31)
    at Function._load (module.js:310:12)
    at Module.require (module.js:357:17)
    at require (module.js:368:17)
    at Object.action (/Users/mydir/Documents/classes/middleclass/Cakefile:22:10)
    at /usr/local/lib/node_modules/coffee-script/lib/coffee-script/cake.js:39:26

所以...我认为这个异常告诉我我需要在浏览器中执行 d3.我尝试了几种不同的方式.不过，基本上，我想如果我只是启动 phantomjs，我可能能够做我想做的事.这是我的蛋糕文件:

So...I figured this exception was telling me that I need to execute d3 inside of a browser. I tried this in a couple different ways. Basically though, I thought if I just fired up phantomjs I'd probably be able to do what I wanted to do. Here was my Cakefile:

task 'data2', 'Build some data with d3', ->
  hem = spawn 'hem', ['server']
  phantom = require('phantom')
  phantom.create (ph) ->
    ph.createPage (page) ->
      page.open 'http://localhost:9294/sandbox.html', (status) ->
        page.evaluate (-> window), (window) ->
          require = window.require
          require('lib/d3.v2')
          console.log("d3 version = "+ d3.version)
          ph.exit()
          hem.kill()

不过，当我走这条路时，我总是会遇到这样的异常:

When I go this route though, I always end up getting exceptions like this:

TypeError: object is not a function
    at Object.CALL_NON_FUNCTION (native)
    at Object.<anonymous> (/Users/mydir/Documents/classes/middleclass/Cakefile:52:13)
    at Object.<anonymous> (/Users/mydir/Documents/classes/middleclass/node_modules/phantom/node_modules/dnode-protocol/index.js:274:16)
    at apply (/Users/mydir/Documents/classes/middleclass/node_modules/phantom/node_modules/dnode-protocol/index.js:143:17)
    at EventEmitter.handle (/Users/mydir/Documents/classes/middleclass/node_modules/phantom/node_modules/dnode-protocol/index.js:120:13)
    at /Users/mydir/Documents/classes/middleclass/node_modules/phantom/node_modules/dnode-protocol/index.js:81:20
    at EventEmitter.<anonymous> (/Users/mydir/Documents/classes/middleclass/node_modules/phantom/node_modules/dnode/node_modules/lazy/lazy.js:62:13)
    at EventEmitter.<anonymous> (/Users/mydir/Documents/classes/middleclass/node_modules/phantom/node_modules/dnode/node_modules/lazy/lazy.js:46:19)
    at EventEmitter.emit (events.js:67:17)
    at EventEmitter.<anonymous> (/Users/mydir/Documents/classes/middleclass/node_modules/phantom/node_modules/dnode/node_modules/lazy/lazy.js:46:39)

我做错了什么??

感谢 mbostock，我得到了以下工作:

Thanks to mbostock I got the following working:

我的 package.json:

My package.json:

{
    "name": "app",
    "version": "0.0.1",
    "dependencies": {
        "d3": "~2.8.0",
        "jsdom": "~0.2.13"
    }
}

我的蛋糕文件:

task 'd3', 'Do something with d3', ->
  jsdom = require('jsdom')
  jsdom.env({
    html: 'public/sandbox.html'
    done: (errors,window) ->
      require('d3/index.js')
      console.log("d3 version = "+ d3.version)
  })

推荐答案

参见 D3 的 包.json.更具体地说，在 Node 或类似环境中运行时需要的文件是 index.html.js 而不是 d3.v2.js；该文件包含一些特殊补丁，使 D3 与 require 运算符兼容.

See D3's package.json. More specifically, the file you want to require when running inside Node or similar environments is index.js rather than d3.v2.js; this file contains some special patches that make D3 compatible with the require operator.

要自己尝试一下，cd 到 d3 存储库，运行 node 以创建交互式 shell，然后说

To try it out for yourself, cd to the d3 repository, run node to create an interactive shell, and then say

var d3 = require("./");

或者，如果您在自己的项目文件夹中，如果您已通过 npm (npm install d3) 将 D3 安装到 node_modules/d3，您可以说:

Or, if you're in your own project folder, if you've installed D3 into node_modules/d3 via npm (npm install d3), you can say:

var d3 = require("d3");

相关文章