Installation instructions? SystemJS config? about d3-ng2-service HOT 15 CLOSED

Thanks for the added information. Loads to digest, given your rather different setup (including the python backend and by implication python scripts)

Given the vast differences in bundler choices/setups, I have been a bit reluctant to start offering (tailor-made) installation installation instructions.

While I have Python locally through an Anaconda setup for TensorFlow, I am going to hold off on creating the full setup, I might need to run your code (possibly we can get to the bottom of it anyway.)

I had a quick look at the branch you linked to. One thing I did not see at first glance is a config file for SystemJS? Is it dynamically created as part of the scripts I may not have digested yet?

In principle, you should map d3-ng2-service to the file referenced in the module entry point of its package.json. Currently, this is the index.js file in the package root directory. It assumes that your bundler (i.e. SystemJs) is configured to interpret JavaScript modules in ES2015 module format (i.e. import/export) The JavaScript files thus imported, however, otherwise use only ES5 language features.

Internally, these compiled library files use import to bring in the required D3 modules (see list at the end of this comment). Again, the file you should map SystemJS to is the one in the module (or js:next) entry point of the package.json for each D3 module, e.g. see here for d3-selection. These index.js files again use modules in ES2015 module format, but otherwise only ES5 features.

Currently, rather than using d3 as your package.json shows, you should use the following D3 modules directly with d3-ng2-service, they are the dependencies of the service package as seen here:

    "d3-array": "1.2",
    "d3-axis": "1.0",
    "d3-brush": "1.0",
    "d3-chord": "1.0",
    "d3-collection": "1.0",
    "d3-color": "1.0",
    "d3-dispatch": "1.0",
    "d3-drag": "1.1",
    "d3-dsv": "1.0",
    "d3-ease": "1.0",
    "d3-force": "1.0",
    "d3-format": "1.2",
    "d3-geo": "1.6",
    "d3-hierarchy": "1.1",
    "d3-interpolate": "1.1",
    "d3-path": "1.0",
    "d3-polygon": "1.0",
    "d3-quadtree": "1.0",
    "d3-queue": "3.0",
    "d3-random": "1.1",
    "d3-scale": "1.0",
    "d3-selection": "1.1",
    "d3-selection-multi": "1.0",
    "d3-shape": "1.2",
    "d3-time": "1.0",
    "d3-time-format": "2.0",
    "d3-timer": "1.0",
    "d3-transition": "1.1",
    "d3-voronoi": "1.1",
    "d3-zoom": "1.3"

So, I suspect, for SystemJS you will not be able to avoid, mapping each of these to the static directory you are hosting them from.

This need to manually manage all these third party library mappings and the lack of native support for ES2015 module format, were two main reasons which the angular-cli moved from SystemJS to Webpack2, as far as I remember.

With respect to d3-timelines, I would like to keep the discussion for SystemJs completely free of it. This would avoid mixing in errors coming from its current dependency on d3 and the way it is combined with the service. When I have a minute, I will look at what you tried to accomplish with d3-timelines (regardless of the bundler issue).

from d3-ng2-service.

@denisemauldin In principle, you do not have to use the @angular/cli to scaffold your project when using this service. However, it might be easiest to use it with Webpack rather than SystemJS.

Please note that, as it currently stands, the installed package provides two module formats:

• package entry points main and module are exposing the functionality as ES2015 modules compiled with an ES5 target
• package entry point es2015 exposes the functionality as an ES2015 module compiled with ES2015 target.

So at a minimum, you would currently have to configure your SystemJS to support importing in ES2015 module format. You might also have to configure, SystemJS to resolve the paths to the module files correctly. While Webpack2 supports this out of the box, SystemJS does not, last I checked.

There were some complications related to the integration with D3, why I currently do not provide an entry point in UMD module format.

from d3-ng2-service.

Yeah, we're currently using es2017 format for operator support. I currently use gulp to put the libraries where the systemjs config expects them. I haven't used webpack2 before or tried different compile options. Would that support both the es2017 operator targets and the es2015 d3 target?

from d3-ng2-service.

Do you have a specific public repo, which I could explore to investigate further? Best would be a minimally "viable" one that has the configuration you are trying to get to work.

The last time I worked with SystemJS was still with AngularJS 1.x and D3 v 3.5.x, so things were different then to begin with...

from d3-ng2-service.

I'm trying to get this d3 plugin to load into angular 2 with the D3Service : https://github.com/denisemauldin/d3-timeline which is published on npm as https://www.npmjs.com/package/d3-timelines

This is a working angular2 starter plunkr with the d3-timelines loaded into a component:
https://plnkr.co/edit/wygEeRBnPkvyMFWBoNTw?p=preview

I forked your demo and I'm trying to load it into there in a new component in d3-demos:
https://github.com/denisemauldin/d3-ng2-demo

It seems to mostly work but the styles don't seem to be applying and the on click event throws a cannot read property 'sourceEvent' of null error.

from d3-ng2-service.

@denisemauldin Am I assuming correctly, that your d3-timeline comment is not related to the SystemJS question in this issue?

If so, I would like to keep the original issue focused on the question you had originally raised.

That being said:

• If there is a d3-ng2-service specific issue, feel free to open a new separate issue in this repo.
• I am not familiar enough with d3-timeline to jump right in and advise of possible solutions to the questions you raised. There is a chance you are running into an issue with d3-selection being imported multiple ways, once through this service and then as part of your "plug-in", so might have conflicting bindings to d3.event under the hood. I did notice that you are using the entire d3 standard bundle as a dependency, would be good to strip it down to only the necessary modules to start with.

I would need a little more time to familiarize myself with your d3-timeline re-implementation for D3v4 to advise further. While I am interested, I can't make any guarantees as to the timing today.

P.S. Back to the original issue, can you provide me with a repo which uses the SystemJS config you wanted to get to work with d3-ng2-service? Thanks. T

from d3-ng2-service.

Hi Tom,

Sorry for the miscommunication. I figured out a way to change my rollup.config in my d3-timeline to get it to not have the sourceEvent error in the d3-ng2-demo example. I'll see if I can get D3Service to load into my other angular project and if I can't, I'll create a more minimal repo to give you as an example or I'll get back to you later if I can't.

edit: Ok. Trying to create a minimal repo. The problem is that we use nginx to serve static files from a specific directory, so I need to copy all of the files from the node_modules directory into the static files directory and load them via SystemJS. I'm not sure which files to copy for D3Service or how to load them. Lodash has an index.js style system loader as well, so what I do for lodash is:

System.config({
    defaultJSExtensions: true,
    map: {
       'lodash': '/static/libs/lodash/index.js' 
    } 
})

Then my gulpfile copies everything from node_modules/lodash/*.js to 'libs/lodash/'. So the static/libs/lodash folder has array.js, chain.js, collection.js, date.js, function.js, index.js, lang.js, math.js, number.js, object.js, string.js, support.js and utility.js.

I set up gulp to copy everything from node_modules/d3-ng2-service/ and node_modules/d3-ng2-service/src/ to /static/libs/d3Service. Then I map 'd3-ng2-service' to /static/libs/d3Service. When I do that Angular 2 errs on load with:

"Error: (SystemJS) Unexpected token <
	SyntaxError: Unexpected token <
	    at eval (<anonymous>)
	    at ZoneDelegate.invoke (https://localhost:9443/static/libs/zone.js:334:26)
	    at Zone.run (https://localhost:9443/static/libs/zone.js:126:43)
	    at https://localhost:9443/static/libs/zone.js:713:57
	    at ZoneDelegate.invokeTask (https://localhost:9443/static/libs/zone.js:367:31)
	Evaluating https://localhost:9443/traceur.js
	Error loading https://localhost:9443/traceur.js
	Unable to load transpiler to transpile https://localhost:9443/static/libs/d3Service/index.js
	Error loading https://localhost:9443/static/libs/d3Service/index.js as "d3-ng2-service" from https://localhost:9443/static/app/app/app.module.js
    at ZoneAwareError (https://localhost:9443/static/libs/zone.js:992:33)
    at t (https://localhost:9443/static/libs/system.js:4:1662)
    at p (https://localhost:9443/static/libs/system.js:4:13515)
    at https://localhost:9443/static/libs/system.js:4:11686
    at ZoneDelegate.invoke (https://localhost:9443/static/libs/zone.js:334:26)
    at Zone.run (https://localhost:9443/static/libs/zone.js:126:43)
    at https://localhost:9443/static/libs/zone.js:713:57
    at ZoneDelegate.invokeTask (https://localhost:9443/static/libs/zone.js:367:31)
    at Zone.runTask (https://localhost:9443/static/libs/zone.js:166:47)
    at drainMicroTaskQueue (https://localhost:9443/static/libs/zone.js:546:35)
    at XMLHttpRequest.ZoneTask.invoke (https://localhost:9443/static/libs/zone.js:424:25)"

The important part of that seems to be:
Error loading https://localhost:9443/static/libs/d3Service/index.js as "d3-ng2-service" from https://localhost:9443/static/app/app/app.module.js

So when my component tries to do import { D3Service } from 'd3-ng2-service, it tries to load /static/libs/d3Service/index.js and that throws an Unexpected token error (I think because it's not expecting an export statement in that file).

Best,
Denise

from d3-ng2-service.

Ok. Here's an example repo that I made from the d3-ng2-demo that has a branch (nginx_django) with a config setup that's pretty close to how ours works.

https://github.com/denisemauldin/d3-ng2-demo/tree/nginx_django

Run gulp and then python manage.py collectstatic to build the way that we do. I'm not sure if it'll help unless you have nginx/gunicorn installed to run the bin/gunicorn_start script. There's a npm install step and a pip install -r requirements/local.txt step that we go through as well and we use a virtualenv/vagrant setup for python but hopefully you won't need any of that.

from d3-ng2-service.

In the SystemJS docs there still is the following comment re ES2015 modules: transpiler plug-in required.

Which, I suppose, may necessitate something like babel-plugin-transform-es2015-modules-systemjs.

Let me know, if, so far, the info allows you to get it to work...

from d3-ng2-service.

And then there is: systemjs-builder.

from d3-ng2-service.

My systemJS build is in test/static/js/systemjs.config.js - I'm going to have to play around with the build targets. I inherited the setup this way, so I may need to change to webpack. I don't really want to do individual configs for each d3 component. We have some code that uses Array.prototype.includes so we're doing es2017 build target right now, but I may be able to switch that to es2016 and retain that functionality. I'll look at the various docs you've linked and check in later. Thanks for your help! :)

from d3-ng2-service.

If I was going to move to a webpack2 version instead of the current gulp build system, do you have a recommendation on where to begin? Ideally we want to have something that outputs a single bundle.js file to load into the browser. Thanks!

from d3-ng2-service.

So I think the problem is that my gulpfile isn't transpiling the files from d3-ng2-service. The export * from './src/d3.service' is es6 code and won't load in the browser and my current gulpfile doesn't transpile any js files (just ts files).

from d3-ng2-service.

If I was going to move to a webpack2 version instead of the current gulp build system, do you have a recommendation on where to begin?

I think, as we speak a key benchmark is still the angular-cli. There are possibly a few other seeds with Webpack2 at the core which may a good starting point. A key limitation in the Angular ecosystem is that there is no established cli for building libraries. Again, there are a few seeds, but in the Angular CLI there is an RFC (and a prior long tracking issue). I have had pretty good results with generator-angular2-library, but there is insufficient convergence to date. That's one main reason, why I kept this repo relatively basic for now.

So I think the problem is that my gulpfile isn't transpiling the files from d3-ng2-service. The export * from './src/d3.service' is es6 code and won't load in the browser and my current gulpfile doesn't transpile any js files (just ts files).

I am afraid to say, you will probably have to tackle the transpiler question when trying to use SytemJS with anything like the d3-ng2-service or anything D3 for that matter. I have just (locally) revisited a little experiment, I had performed before: Publish the d3-ng2-service in UMD format to support SystemJS without transpiling. The implications are two-fold:

(1) As I keep the relevant D3 modules as externals/peer dependencies, the consuming app needs to have all the paths/maps for both the d3-ng2-service library and all the relevant D3 modules configured for SystemJS. I used Angular Seed as the basis and all D3 related imports were from UMD modules.
(2) While doing the above allows SystemJS to load all the modules appropriately, the mechanics of D3 now create a problem: the event bindings to d3.event from d3-selection break. This is due to the fact that the imports from UMD modules do not preserve the live-binding to d3.event. This is another reason why you may see D3 events returning null and consuming code failing for features like d3-drag, d3-zoom and d3-brush.

The latter is exactly what happens in the demo of Brush/Zoom 2 I just tested. It renders just fine, but the event handling for zoom/brush is breaking.

Note that the Angular Seed, I mentioned, also has a brief discussion related transpilation for support of ES6 module format imports. See here

from d3-ng2-service.

Ok. I got it to load. I had to write a gulp task that compiled the d3-ng2-service and all of the d3 component requirements into es2016 and then loaded them all from the same directory.

var es6ModuleDirs = {
    'd3-ng2-service/*.js': 'libs/d3/',
    'd3-ng2-service/src/*.js': 'libs/d3/src/',
};
var es6Modules = {
    'd3-array/build/d3-array.js': 'libs/d3/src/d3-array.js',
    'd3-axis/build/d3-axis.js': 'libs/d3/src/d3-axis.js',
    'd3-brush/build/d3-brush.js': 'libs/d3/src/d3-brush.js',
    'd3-chord/build/d3-chord.js': 'libs/d3/src/d3-chord.js',
    'd3-collection/build/d3-collection.js': 'libs/d3/src/d3-collection.js',
    'd3-color/build/d3-color.js': 'libs/d3/src/d3-color.js',
    'd3-dispatch/build/d3-dispatch.js': 'libs/d3/src/d3-dispatch.js',
    'd3-drag/build/d3-drag.js': 'libs/d3/src/d3-drag.js',
    'd3-dsv/build/d3-dsv.js': 'libs/d3/src/d3-dsv.js',
    'd3-ease/build/d3-ease.js': 'libs/d3/src/d3-ease.js',
    'd3-force/build/d3-force.js': 'libs/d3/src/d3-force.js',
    'd3-format/build/d3-format.js': 'libs/d3/src/d3-format.js',
    'd3-geo/build/d3-geo.js': 'libs/d3/src/d3-geo.js',
    'd3-hierarchy/build/d3-hierarchy.js': 'libs/d3/src/d3-hierarchy.js',
    'd3-interpolate/build/d3-interpolate.js': 'libs/d3/src/d3-interpolate.js',
    'd3-path/build/d3-path.js': 'libs/d3/src/d3-path.js',
    'd3-polygon/build/d3-polygon.js': 'libs/d3/src/d3-polygon.js',
    'd3-quadtree/build/d3-quadtree.js': 'libs/d3/src/d3-quadtree.js',
    'd3-queue/build/d3-queue.js': 'libs/d3/src/d3-queue.js',
    'd3-random/build/d3-random.js': 'libs/d3/src/d3-random.js',
    'd3-request/build/d3-request.js': 'libs/d3/src/d3-request.js',
    'd3-scale/build/d3-scale.js': 'libs/d3/src/d3-scale.js',
    'd3-selection/build/d3-selection.js': 'libs/d3/src/d3-selection.js',
    'd3-selection-multi/build/d3-selection-multi.js': 'libs/d3/src/d3-selection-multi.js',
    'd3-shape/build/d3-shape.js': 'libs/d3/src/d3-shape.js',
    'd3-time/build/d3-time.js': 'libs/d3/src/d3-time.js',
    'd3-time-format/build/d3-time-format.js': 'libs/d3/src/d3-time-format.js',
    'd3-timer/build/d3-timer.js': 'libs/d3/src/d3-timer.js',
    'd3-transition/build/d3-transition.js': 'libs/d3/src/d3-transition.js',
    'd3-voronoi/build/d3-voronoi.js': 'libs/d3/src/d3-voronoi.js',
    'd3-zoom/build/d3-zoom.js': 'libs/d3/src/d3-zoom.js',

gulp.task('collectES6Modules', ['clean'], function() {
    var streams = [];
    Object.keys(es6Modules).forEach(function(path) {
        streams.push(
            gulp.src(path, {'cwd': paths.node})
            .pipe(babel({
                presets: ['babel-preset-es2015'],
            }))
            .pipe(rename(es6Modules[path]))
            .pipe(gulp.dest(paths.build))
        );
    });
    return merge(streams);
});

// Compile ES6 Files
gulp.task('collectES6ModuleDirs', ['clean'], function() {
    var streams = [];
    Object.keys(es6ModuleDirs).forEach(function(path) {
        streams.push(
            gulp.src(path, {'cwd': paths.node})
            .pipe(babel({
                presets: ['babel-preset-es2015'],
            }))
            .pipe(gulp.dest(es6ModuleDirs[path], {'cwd': paths.build }))
        );
    });
    return merge(streams);
});

Then I had to load d3-timelines normally because I have a build process that builds an es5 version of the module. This uses the npm packages: d3, d3-ng2-service, d3-selection-multi, and d3-timelines. Finally, I had to add all of the paths to the systemjs loader.

System.config({
    defaultJSExtensions: true,
    map: {
            'd3-ng2-service': '/static/libs/d3/index.js',
            'd3-array': '/static/libs/d3/src/d3-array.js',
            'd3-axis': '/static/libs/d3/src/d3-axis.js',
            'd3-brush': '/static/libs/d3/src/d3-brush.js',
            'd3-chord': '/static/libs/d3/src/d3-chord.js',
            'd3-collection': '/static/libs/d3/src/d3-collection.js',
            'd3-color': '/static/libs/d3/src/d3-color.js',
            'd3-dispatch': '/static/libs/d3/src/d3-dispatch.js',
            'd3-drag': '/static/libs/d3/src/d3-drag.js',
            'd3-dsv': '/static/libs/d3/src/d3-dsv.js',
            'd3-ease': '/static/libs/d3/src/d3-ease.js',
            'd3-force': '/static/libs/d3/src/d3-force.js',
            'd3-format': '/static/libs/d3/src/d3-format.js',
            'd3-geo': '/static/libs/d3/src/d3-geo.js',
            'd3-hierarchy': '/static/libs/d3/src/d3-hierarchy.js',
            'd3-interpolate': '/static/libs/d3/src/d3-interpolate.js',
            'd3-path': '/static/libs/d3/src/d3-path.js',
            'd3-polygon': '/static/libs/d3/src/d3-polygon.js',
            'd3-quadtree': '/static/libs/d3/src/d3-quadtree.js',
            'd3-queue': '/static/libs/d3/src/d3-queue.js',
            'd3-random': '/static/libs/d3/src/d3-random.js',
            'd3-request': '/static/libs/d3/src/d3-request.js',
            'd3-scale': '/static/libs/d3/src/d3-scale.js',
            'd3-selection': '/static/libs/d3/src/d3-selection.js',
            'd3-selection-multi': '/static/libs/d3/src/d3-selection-multi.js',
            'd3-shape': '/static/libs/d3/src/d3-shape.js',
            'd3-time': '/static/libs/d3/src/d3-time.js',
            'd3-time-format': '/static/libs/d3/src/d3-time-format.js',
            'd3-timer': '/static/libs/d3/src/d3-timer.js',
            'd3-timelines': '/static/libs/d3/src/d3-timelines.js',
            'd3-transition': '/static/libs/d3/src/d3-transition.js',
            'd3-voronoi': '/static/libs/d3/src/d3-voronoi.js',
            'd3-zoom': '/static/libs/d3/src/d3-zoom.js',
    }
});

Thank you very much for your help. I have a lingering type question about an SVGSVGElement.append returning a Selection instead of a Selection - should I ask that here on on SO?

from d3-ng2-service.