Use D3 with any Framework
In this lesson you will learn how to use a D3 line graph with any framework. The video shows the examples of Angular, React and Cycle.js, but you can transfer the knowledge to other frameworks easily.
[00:00] As example component, we will use a simple line graph that we built in another video. The important aspect is that we do not use D3's built-in DOM manipulation, but use just generators to get us a string.
[00:15] As you can see here, we are using VanillaJS to set an attribute on a predefined element. For our purpose, we will delete those lines and simply export this line string. As you can see here, I already created a few test projects. Those are just empty scaffolds of create-cycle-app, create-react-app, and Angular CLI.
[00:43] Let's jump into our React code. In this main app, we replace all we need with an SVG, set path element with MD attribute, and of course, close the SVG again. We don't need a logo anymore. We can import the line string that we just exported and use that as our D attribute in our JSX code.
[01:31] If we save that, we see the graph, but it's weird because we haven't included the styles we created last time. We simply include the styles as well, and it looks just as we expected. Let's jump to Angular. This is the Angular component we will see here.
[01:57] First, we will change that title attribute to a path string, and it will be our line string. We'll import that, and we will adjust our template. Here's a lot of stuff in there. We will delete everything and, again, put in an SVG, put in a path with an attribute binding that will be our path string, then close the SVG and close the div, save, and we see again the same path.
[02:50] We didn't have to care about the styling because I overwrote the default app.component.css with the styles CSS. Now let's jump to Cycle.js. In here, we have a lot that we don't actually need, so let's just delete it.
[03:10] Now, we replace everything inside this div with, again, an SVG, a path with MD attribute, and close the SVG, close the div, and import the line string from our graph component. Reload and switch to Cycle app, and again, we have the graph we expect.
[03:50] You can use that for every D3 component as long as you do not use D3's direct DOM manipulation, but export strings for attributes.