Advice on using Angular 2 and D3 ?

[Robert Werner]

I'm hoping to get an April 2017 update on what might be considered the best practices to use Angular 2 with D3.

For simplicity's sake, imagine that you are responsible for building an Angular 2 app that has a series of charts in it: bar, line, pie, scatter plot, etc.  Imagine further that you want these charts to be very dynamic with the user interacting with them.

If this were your assignment, how much would you use D3 vs. Angular?

I realize this is a very open-ended question but I'm trying to get some insight from those who have already worked with these two technologies.

Thank you,

Robert

[Sander Elias]

Hi Robert,

Have you seen the D3 service for Angular? They have seemed to travel the same road. You might not want to use the thing, but by going over their sources, there will be pointers on your question.

If your app is only about visualising, I might even let forego Angular.

However, Angular brings structure, and architecture to any app. Also, it is very well suited to manage the data you need. 

Hope this helps you a tad,

Regards

Sander

[Robert Werner]

Hi Sander,

Yes, I did take a look at that.  I tried to get the companion demo to work: https://github.com/tomwanzek/d3-ng2-demo

But it failed due to "Version of @angular/compiler-cli needs to be 2.3.1 or greater.  Current version is 'undefined'."  I tried for a long while to fix this but could not.  I tried to do so on both a Mac and PC.

When such demo apps won't run, I always fear that the open source project is dead and not being updated to the latest version of Angular, etc.

Just curious, are you able to get his demo app running?

Robert

[Sander Elias]

Hi Robert,

The demo seems to need a bit of updating. I don't see major issues with it, aside from the point that it needs some refreshing, so it works with the current state of affairs. Updating the whole thing to latest would take me half an hour. (would be less if it was a project I was familiar with!)

I don't think the project is dead, but you can open up an issue in there, where you ask to update to the latest stuff. See how that fares, it might be illuminating ;)

Then again, I seldom use stuff like this, as I rather roll my own solutions. I would go over the source of this to see how they approach the integration. Probably I would read myself through a couple more similar repos, and then extract what I need for my current project, and write a wrapper that's tailored to that. I prefer my number of 3rth parties as low as possible.

Regards

Sander

[Long Field]

OK, this is how I do to my angular & d3.js

     

     Firstly in your index.html and d3.js as :

     <script src="js/d3.v3.min.js"></script>

     Secondly in your components/class/file where d3.js is going to use add this after your import 

     declare var d3: any;

     

     Thirdly copy and rename your existing d3.js function

     

     Finally your need manually change  "var" to "let" in your  d3.js code (this is important) and there are other changes you will be aware when your compile your code.

     

     The good thing about doing this way is you are making min.  changes to your existing d3.js function.

     

     This won't be the best way of doing it, but I am too busy to find out.

[Long Field]

  

     Aslo I do:

      @ViewChild('graph') element: ElementRef;

      

      then, I can do as:

      

        let svg = d3.select(this.element.nativeElement);

      

      

On Wednesday, April 12, 2017 at 8:30:34 AM UTC+10, Robert Werner wrote: