D3.js the method of realizing line chart _javascript skill

Objective

D3.js is a JavaScript class library that helps developers manipulate data-based documents, in the "D3.js method of implementing a histogram." has been introduced to you how to use d3.js to achieve a simple histogram, today we learn to use D3.js to implement the line chart, interested friends to see below together.

A line chart is made up of axes, lines, and points. As with the histogram, we're going to put the approximate drawing frame together, the code below ( don't forget to add D3.js):

<! 
    DOCTYPE html>  

The implementation of the axes

To create an axis, you need to create a scale first. The ordinal scale and the linear scale are mentioned in the D3.js method of realizing the histogram, because there is a continuous relationship between the points and the points of the polyline, so we all use linear scale for the x and Y axes of the line chart.

//Analog data var DataSet = [{x:0, y:11}, {x:1, y:35}, {x:2, y:23}, {x:3, y:78},
{x:4, y:55}, {x:5, y:18}, {x:6, y:98}, {x:7, y:100}, {x:8, y:22}, {x:9, y:65}];
    Create the scale (linear scale) of the x-axis var XScale = d3.scale.linear (). Domain (d3.extent (DataSet, function (d) {return d.x;
)). Range ([0, Width-padding.left-padding.right]);
    Create a scale (linear scale) of y-axis var yscale = d3.scale.linear (). Domain ([0, D3.max (dataset,function (d) {return d.y;
]). Range ([Height-padding.top-padding.bottom, 0]);
Create x-axis var xaxis = D3.svg.axis (). Scale (XScale). Orient (' bottom ');
Create y-axis var yaxis = D3.svg.axis (). Scale (Yscale). Orient (' left '); Add SVG elements and bind to the x-axis main.append (' G '). attr (' class ', ' axis '). attr (' transform ', ' translate (0, ' + (height-padding
. Top-padding.bottom) + '). Call (Xaxis); Add SVG elements and bind to the Y-axis main.append (' G '). attr (' class ', ' axis '). Call (YAxis); 

This time we simulated some points of data to draw the polyline. d3.scale.linear()creates a linear scale, defines a linear.domain() domain, and defines a range linear.range() . Notice here that because the Y axis of the SVG canvas is reversed with the direction of the Y axis of the traditional cognition, it also needs to be reversed when defining the definition field and the range of the Y axis. The d3.extent maximum and minimum values in the parameter array can be obtained and returned as an array. The two axes are then used to d3.svg.axis() apply the scale to them, with the axis.orient() direction of the ruler with the axes set. Finally, add the SVG element and call() associate the defined axis with the SVG element. Move the elements by setting their transform properties so that they look like a coordinate system.

Implementation of the Polyline

In D3.js, you need to create a function of a line, and then assign a value from that function to the D attribute representing the path element of the polyline in order to draw the polyline. It needs to be clear that line is a function, not an object.

The specific code is as follows:

Add Polyline
var line = D3.svg.line ()
    . x (function (d) {return
      XScale (d.x)
    })
    . Y (function (d) { Return
      Yscale (D.Y);
    })
    Select the type of line
    . interpolate (' linear ');
Add the path element and compute the value by line () to assign
main.append (' path ')
    . attr (' class ', ' line ')
    . attr (' d ', Line (dataset));

After doing so, we get a line shown in the following figure.

Point of implementation

The point is actually a circle, so here we use the SVG circle elements to draw points.

Add Point
main.selectall (' Circle ')
    . Data (DataSet).
    Enter ()
    . Append (' Circle ').
    attr (' CX ', function (d) {return
      XScale (d.x);
    })
    . attr (' Cy ', function (d) {return
      Yscale (D.Y);
    })
    . attr (' R ', 5)
    . attr (' Fill ', function (d, i) {return
      getcolor (i);
    });

Select all circles in the main element first "placeholder" (because this is an empty set, except that the collection represents all the circles in main), and then bind the dataset to the collection by enter() and append() Use to add a new circle element until the number of collection elements is the same as the number of dataset child elements. By using scale to calculate the coordinates of each circle and assign values to its related properties, the point of addition is completed.

Summarize

The above is the use of d3.js to achieve the entire line chart, I hope this article for everyone's study and work can help. If you have questions you can message exchange, small series will be updated on the d3.js of the article, please continue to pay attention to cloud habitat community.