The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

React Fundamentals: Integrating Components with D3 and AngularJS

React Fundamentals: Integrating Components with D3 and AngularJS

9:31
Since React is only interested in the V (view) of MVC, it plays well with other toolkits and frameworks. This includes [AngularJS](https://egghead.io/technologies/angularjs) and [D3](https://egghead.io/technologies/d3).
Watch this lesson now
Avatar
egghead.io

Since React is only interested in the V (view) of MVC, it plays well with other toolkits and frameworks. This includes AngularJS and D3.

Avatar
Simona

Hi,

Thanks for the awesome video! It's been of great help. I am trying to update the chart every three seconds using $interval. The dataset gets updated correctly but the chart remains the same (please see http://plnkr.co/edit/bVnCiR07sN2PmBj9qCTv?p=preview). Do you have any idea why this happens?

Thanks!

In reply to egghead.io
Avatar
Andreas

I had to change the code a bit to get it working.
randomNumber is now legacy and changed to number
type needs to be jasonp to get around this error: No 'Access-Control-Allow-Origin' header is present ...

reqwest({
    url: 'http://filltext.com/?rows=10&val={number}',
    type: 'jsonp',
    success:function(resp){
        this.setState({data:resp})
        this.renderChart(this.state.data)
    }.bind(this)
})
In reply to egghead.io
Avatar
Joseph

@Andreas, Good catch! The source code will be updated shortly.

In reply to Andreas
Avatar
Matheus

Hi,

Thanks for the awesome video! It's been of great help. I am trying to update the chart every three seconds using $interval. The dataset gets updated correctly but the chart remains the same (please see http://plnkr.co/edit/bVnCiR07sN2PmBj9qCTv?p=preview). Do you have any idea why this happens?

Thanks!

Did anyone had the chance to explain why doesn't the chart update after it gets the initial rendering? I'm having a similar problem where I want to update the chart with a new random dataset after the user clicks on a button that will generate a new $scope.data on the ng-click.

The new $scope.data is assigned, the ng-directive is updated and calls the React's element renderChart method with the new data but it does not re-render.

Any thoughts? Thanks.

In reply to Simona
Avatar
Jon

Worked perfectly! Thanks.

In reply to Andreas
Avatar
Robert

Hi Joe, why you call the renderChart inside ComponentWillMount instead of ComponentDidMount? if the ajax response is faster than the render method call (ok, it's impossible) you don't have #chart enable. Thx for your great tutorials!! R*

Avatar
Agata

Hello, the link to code seems broken.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?