I'm trying to use d3.js with aurelia.io ,
I found a skeleton here, but it is outdated https://github.com/shmendo/aurelia-d3-skeleton
I installed it with jspm and about 20 differents packages are installed
jspm install d3
is there a way to install only one big package because I have issue while importing
I am able to import d3 like this
import * as d3 from 'd3';
but calling the time module cause an error on page load
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
No idea why, my config.js file seems configured correctly to map d3-time
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:[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]"
}
}
});
It isn't a JSPM issue, but the d3 API changed.
The format.parse method has also been removed in favor of separate d3.timeParse, d3.utcParse and d3.isoParse parser constructors. Thus, this code in 3.x:
var parseTime = d3.time.format("%c").parse;
Can be rewritten in 4.0 as:
var parseTime = d3.timeParse("%c");
https://github.com/d3/d3/blob/master/CHANGES.md#time-formats-d3-time-format
By default it installs version 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"
}
}
works