2016-09-07 69 views
3

我試圖使用d3.js與aurelia.io,使用d3.js與奧裏利亞框架

我發現這裏的骨架,但它是過時的https://github.com/shmendo/aurelia-d3-skeleton

我安裝了它與JSPM約20個型動物包都安裝

jspm install d3 

是有辦法只安裝一個大包,因爲我有問題,而進口

我能夠導入D3樣T他的

從d3導入*作爲d3;

但在調用時造成模塊在頁面加載錯誤

var parseDate = d3.time.format("%d-%b-%y").parse; 

aurelia-logging-console.js:54 ERROR [app-router] Error: (SystemJS) XHR error (404 Not Found) loading http://host/d3-time.js 
Error: XHR error (404 Not Found) loading http://host/d3-time.js 

不知道爲什麼,我的config.js文件似乎正確配置映射D3時間

System.config({ 
     baseURL: "/", 
     defaultJSExtensions: true, 
     transpiler: "babel", 
     babelOptions: { 
     "optional": [ 
      "runtime", 
      "es7.decorators", 
      "optimisation.modules.system" 
     ] 
     }, 
     paths: { 
     "github:*": "jspm_packages/github/*", 
     "npm:*": "jspm_packages/npm/*" 
     }, 

     map: { 
     "aurelia-bootstrapper": "npm:[email protected]", 
     "babel": "npm:[email protected]", 
     "babel-runtime": "npm:[email protected]", 
     "core-js": "npm:[email protected]", 
     "d3": "npm:[email protected]", 
     "socket.io-client": "npm:[email protected]", 
     "github:jspm/[email protected]": { 
      "assert": "npm:[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "buffer": "npm:[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "events": "npm:[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "Base64": "npm:[email protected]", 
      "events": "github:jspm/[email protected]", 
      "inherits": "npm:[email protected]", 
      "stream": "github:jspm/[email protected]", 
      "url": "github:jspm/[email protected]", 
      "util": "github:jspm/[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "https-browserify": "npm:[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "path-browserify": "npm:[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "process": "npm:[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "stream-browserify": "npm:[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "url": "npm:[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "util": "npm:[email protected]" 
     }, 
     "github:jspm/[email protected]": { 
      "vm-browserify": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "assert": "github:jspm/[email protected]", 
      "buffer": "github:jspm/[email protected]", 
      "process": "github:jspm/[email protected]", 
      "util": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-logging": "npm:[email protected]", 
      "aurelia-metadata": "npm:[email protected]", 
      "aurelia-pal": "npm:[email protected]", 
      "aurelia-task-queue": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-event-aggregator": "npm:[email protected]", 
      "aurelia-framework": "npm:[email protected]", 
      "aurelia-history": "npm:[email protected]", 
      "aurelia-history-browser": "npm:[email protected]", 
      "aurelia-loader-default": "npm:[email protected]", 
      "aurelia-logging-console": "npm:[email protected]", 
      "aurelia-pal": "npm:[email protected]", 
      "aurelia-pal-browser": "npm:[email protected]", 
      "aurelia-polyfills": "npm:[email protected]", 
      "aurelia-router": "npm:[email protected]", 
      "aurelia-templating": "npm:[email protected]", 
      "aurelia-templating-binding": "npm:[email protected]", 
      "aurelia-templating-resources": "npm:[email protected]", 
      "aurelia-templating-router": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-metadata": "npm:[email protected]", 
      "aurelia-pal": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-logging": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-binding": "npm:[email protected]", 
      "aurelia-dependency-injection": "npm:[email protected]", 
      "aurelia-loader": "npm:[email protected]", 
      "aurelia-logging": "npm:[email protected]", 
      "aurelia-metadata": "npm:[email protected]", 
      "aurelia-pal": "npm:[email protected]", 
      "aurelia-path": "npm:[email protected]", 
      "aurelia-task-queue": "npm:[email protected]", 
      "aurelia-templating": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-history": "npm:[email protected]", 
      "aurelia-pal": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-loader": "npm:[email protected]", 
      "aurelia-metadata": "npm:[email protected]", 
      "aurelia-pal": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-metadata": "npm:[email protected]", 
      "aurelia-path": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-logging": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-pal": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-pal": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-pal": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-path": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-dependency-injection": "npm:[email protected]", 
      "aurelia-event-aggregator": "npm:[email protected]", 
      "aurelia-history": "npm:[email protected]", 
      "aurelia-logging": "npm:[email protected]", 
      "aurelia-path": "npm:[email protected]", 
      "aurelia-route-recognizer": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-pal": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-binding": "npm:[email protected]", 
      "aurelia-logging": "npm:[email protected]", 
      "aurelia-templating": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-binding": "npm:[email protected]", 
      "aurelia-dependency-injection": "npm:aurelia-dependency-injectio[email protected]", 
      "aurelia-loader": "npm:[email protected]", 
      "aurelia-logging": "npm:[email protected]", 
      "aurelia-metadata": "npm:[email protected]", 
      "aurelia-pal": "npm:[email protected]", 
      "aurelia-path": "npm:[email protected]", 
      "aurelia-task-queue": "npm:[email protected]", 
      "aurelia-templating": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-dependency-injection": "npm:[email protected]", 
      "aurelia-logging": "npm:[email protected]", 
      "aurelia-metadata": "npm:[email protected]", 
      "aurelia-pal": "npm:[email protected]", 
      "aurelia-path": "npm:[email protected]", 
      "aurelia-router": "npm:[email protected]", 
      "aurelia-templating": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "aurelia-binding": "npm:[email protected]", 
      "aurelia-dependency-injection": "npm:[email protected]", 
      "aurelia-loader": "npm:[email protected]", 
      "aurelia-logging": "npm:[email protected]", 
      "aurelia-metadata": "npm:[email protected]", 
      "aurelia-pal": "npm:[email protected]", 
      "aurelia-path": "npm:[email protected]", 
      "aurelia-task-queue": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "assert": "github:jspm/[email protected]", 
      "callsite": "npm:[email protected]", 
      "fs": "github:jspm/[email protected]", 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "base64-js": "npm:[email protected]", 
      "child_process": "github:jspm/[email protected]", 
      "fs": "github:jspm/[email protected]", 
      "ieee754": "npm:[email protected]", 
      "isarray": "npm:[email protected]", 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "fs": "github:jspm/[email protected]", 
      "path": "github:jspm/[email protected]", 
      "process": "github:jspm/[email protected]", 
      "systemjs-json": "github:systemjs/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-dispatch": "npm:[email protected]", 
      "d3-drag": "npm:[email protected]", 
      "d3-interpolate": "npm:[email protected]", 
      "d3-selection": "npm:[email protected]", 
      "d3-transition": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-array": "npm:[email protected]", 
      "d3-path": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-dispatch": "npm:[email protected]", 
      "d3-selection": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "rw": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-collection": "npm:[email protected]", 
      "d3-dispatch": "npm:[email protected]", 
      "d3-quadtree": "npm:[email protected]", 
      "d3-timer": "npm:[email protected]", 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]", 
      "d3-array": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-color": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-collection": "npm:[email protected]", 
      "d3-dispatch": "npm:[email protected]", 
      "d3-dsv": "npm:[email protected]", 
      "xmlhttprequest": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-array": "npm:[email protected]", 
      "d3-collection": "npm:[email protected]", 
      "d3-color": "npm:[email protected]", 
      "d3-format": "npm:[email protected]", 
      "d3-interpolate": "npm:[email protected]", 
      "d3-time": "npm:[email protected]", 
      "d3-time-format": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-path": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-time": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-color": "npm:[email protected]", 
      "d3-dispatch": "npm:[email protected]", 
      "d3-ease": "npm:[email protected]", 
      "d3-interpolate": "npm:[email protected]", 
      "d3-selection": "npm:[email protected]", 
      "d3-timer": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "d3-dispatch": "npm:[email protected]", 
      "d3-drag": "npm:[email protected]", 
      "d3-interpolate": "npm:[email protected]", 
      "d3-selection": "npm:[email protected]", 
      "d3-transition": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]", 
      "d3-array": "npm:[email protected]", 
      "d3-axis": "npm:[email protected]", 
      "d3-brush": "npm:[email protected]", 
      "d3-chord": "npm:[email protected]", 
      "d3-collection": "npm:[email protected]", 
      "d3-color": "npm:[email protected]", 
      "d3-dispatch": "npm:[email protected]", 
      "d3-drag": "npm:[email protected]", 
      "d3-dsv": "npm:[email protected]", 
      "d3-ease": "npm:[email protected]", 
      "d3-force": "npm:[email protected]", 
      "d3-format": "npm:[email protected]", 
      "d3-geo": "npm:[email protected]", 
      "d3-hierarchy": "npm:[email protected]", 
      "d3-interpolate": "npm:[email protected]", 
      "d3-path": "npm:[email protected]", 
      "d3-polygon": "npm:[email protected]", 
      "d3-quadtree": "npm:[email protected]", 
      "d3-queue": "npm:[email protected]", 
      "d3-random": "npm:[email protected]", 
      "d3-request": "npm:[email protected]", 
      "d3-scale": "npm:[email protected]", 
      "d3-selection": "npm:[email protected]", 
      "d3-shape": "npm:[email protected]", 
      "d3-time": "npm:[email protected]", 
      "d3-time-format": "npm:[email protected]", 
      "d3-timer": "npm:[email protected]", 
      "d3-transition": "npm:[email protected]", 
      "d3-voronoi": "npm:[email protected]", 
      "d3-zoom": "npm:[email protected]", 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "ms": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]", 
      "component-emitter": "npm:[email protected]", 
      "component-inherit": "npm:[email protected]", 
      "debug": "npm:[email protected]", 
      "engine.io-parser": "npm:[email protected]", 
      "has-cors": "npm:[email protected]", 
      "indexof": "npm:[email protected]", 
      "parsejson": "npm:[email protected]", 
      "parseqs": "npm:[email protected]", 
      "parseuri": "npm:[email protected]", 
      "yeast": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "after": "npm:[email protected]", 
      "arraybuffer.slice": "npm:[email protected]", 
      "base64-arraybuffer": "npm:[email protected]", 
      "blob": "npm:[email protected]", 
      "buffer": "github:jspm/[email protected]", 
      "has-binary": "npm:[email protected]", 
      "utf8": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]", 
      "fs": "github:jspm/[email protected]", 
      "isarray": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]", 
      "fs": "github:jspm/[email protected]", 
      "isarray": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "http": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "util": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "better-assert": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "better-assert": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "better-assert": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "assert": "github:jspm/[email protected]", 
      "fs": "github:jspm/[email protected]", 
      "vm": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]", 
      "core-util-is": "npm:[email protected]", 
      "events": "github:jspm/[email protected]", 
      "inherits": "npm:[email protected]", 
      "isarray": "npm:[email protected]", 
      "process": "github:jspm/[email protected]", 
      "stream-browserify": "npm:[email protected]", 
      "string_decoder": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]", 
      "fs": "github:jspm/[email protected]", 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "backo2": "npm:[email protected]", 
      "buffer": "github:jspm/[email protected]", 
      "component-bind": "npm:[email protected]", 
      "component-emitter": "npm:[email protected]", 
      "debug": "npm:[email protected]", 
      "engine.io-client": "npm:[email protected]", 
      "has-binary": "npm:[email protected]", 
      "indexof": "npm:[email protected]", 
      "object-component": "npm:[email protected]", 
      "parseuri": "npm:[email protected]", 
      "socket.io-parser": "npm:[email protected]", 
      "to-array": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "benchmark": "npm:[email protected]", 
      "buffer": "github:jspm/[email protected]", 
      "component-emitter": "npm:[email protected]", 
      "debug": "npm:[email protected]", 
      "isarray": "npm:[email protected]", 
      "json3": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "events": "github:jspm/[email protected]", 
      "inherits": "npm:[email protected]", 
      "readable-stream": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "assert": "github:jspm/[email protected]", 
      "punycode": "npm:[email protected]", 
      "querystring": "npm:[email protected]", 
      "util": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "systemjs-json": "github:systemjs/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "inherits": "npm:[email protected]", 
      "process": "github:jspm/[email protected]" 
     }, 
     "npm:[email protected]": { 
      "indexof": "npm:[email protected]" 
     }, 
     "npm:[email protected]": { 
      "buffer": "github:jspm/[email protected]", 
      "child_process": "github:jspm/[email protected]", 
      "fs": "github:jspm/[email protected]", 
      "http": "github:jspm/[email protected]", 
      "https": "github:jspm/[email protected]", 
      "process": "github:jspm/[email protected]", 
      "url": "github:jspm/[email protected]" 
     } 
     } 
    }); 

回答

3

這是不一個JSPM問題,但d3 API已更改。

format.parse方法也被刪除,以支持單獨的d3.timeParse,d3.utcParse和d3.isoParse解析器構造函數。因此,該代碼3.X:

var parseTime = d3.time.format("%c").parse; 

可在4.0改寫爲:

var parseTime = d3.timeParse("%c"); 

https://github.com/d3/d3/blob/master/CHANGES.md#time-formats-d3-time-format

默認情況下,它會安裝版本4.

import { timeFormat } from 'd3'; 

    export class Welcome { 

     attached() { 
     var formatMonth = timeFormat("%B"), 
      formatDay = timeFormat("%A"), 
      date = new Date(2014, 4, 1); 

      console.log(formatMonth(date)); // "May" 
      console.log(formatDay(date)); // "Thursday" 
     } 

    } 

作品

+0

謝謝Erik :) –