First, you need to import the d3-axis and d3-scale libraries:
12 | 16 |For what follows, remember what you learned about scales in the scales tutorial page.
17 |You can read the online documentation about d3-axis with typescript on this human-readable reference.
18 |Note that xAxis is a function.
36 |Here is the SVG viewport we will use: it has a width of 300. 42 | We want to map the numbers of 0 to 100 (this is the domain) onto the width our svg (300). 43 | So we define the range of the scale from 0 to 300.
44 | 45 | 52 | 53 |To call the axis function, we use the .call() method of the svg container:
54 | 60 | 61 | 62 |The result in the developer tool:
63 |Regardless of orientation, axes are always rendered at the origin. To change the position of the axis with respect to the chart, specify a transform attribute on the containing element. For example:
101 | 104 | 105 |How to make the SVG Coordinate Space scale up and/or down to fit the data?
11 |Basically we have to change the width and height value of the SVG container to fit the max X and the max Y where the shapes will be drawn.:
12 | 20 | 21 |What are max.x and max.y ?
22 |It comes from the getMaxSVG method that does what follows:
23 | 42 | 43 |Result:
44 | 45 |Add an SVG Group Element to the defined SVG Container then add the shapes into this container.
13 | 44 | 45 |Change attributes, here: adding 80 units to the cx attribute of each circles:
60 | 61 | 73 | 74 | 84 |This transform definition specifies a translation by x and y. This is equivalent to matrix(1 0 0 1 x y). If y is not provided, it is assumed to be zero.
94 | 106 | 116 | 117 |This transform definition specifies a scale operation by x and y. This is equivalent to matrix(x 0 0 y 0 0). If y is not provided, it is assumed to be equal to x.
119 | 131 | 132 | 142 | 143 |This transform definition specifies a skew transformation along the x or y axis by a degrees.
145 | 157 | 167 | 168 |This transform definition specifies a transformation in the form of a transformation matrix of six values.
170 | 182 | 192 | 193 | 194 |This transform definition specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotate is about the origin of the current user coordinate system
196 |If optional parameters x and y are supplied, the rotate is about the point (x, y)
197 | 209 | 219 | 220 | 221 |I made this app while learning D3.js. But while I had in mind that my goal was to use it in an Ionic app, I realized there was some differences compared to a classical use. Mainly because of Typescript.
16 |If you're in this case, you need to install TypeScript type definitions. So syntax may be different than a simple usage of D3.js. 17 | 18 |
I propose to share my work to make you save time while learning.
20 |I think these examples could also be appropriated if you already are in and advanced step of your learning but stuck on some points.
21 | 22 |Most of these examples are based on Dashing D3.js tutorials adapted in Typescript 2 for Ionic 3.
24 |Source code is available on this github repo.
25 |I suppose if you're here you know what Ionic is, probably your favorite framework for building amazing mobile apps :-)
32 |This is not exactly our subject here but if you are an Ionic developer I suggest you to make the documentation your bible.
33 | 34 |D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML
36 |Learn more about D3.js here. Consider it as a complementary of your bible if you wanna learn data visualization.
37 |I suggest you to be more familiar with the context.
42 |Otherwise you're maybe not a developer and I'm sorry you're here :-)
43 |You need to install D3 in your console as follows
14 | 15 | 18 | 19 |Install D3 TypeScript type definitions to take advantage of the autocompletion of D3
20 | 23 |Depending on which component of D3 you need, you'll import it in your typescript files as follows
30 | 36 |The "curve" method sets the curve factory and returns the line generator. 11 | Instead of just providing the data to the svg container, we provide the generated data by the chosen generator.
12 | 13 | 28 |Resize the data to fit into the pre-defined SVG Coordinate Space
16 |In this section we need to import d3-scale and d3-array:
17 | 21 |{{initialDataToScale.join(' | ')}}
47 | 48 |{{scaledData.join(' | ')}}
50 | 51 |