D3.js Introductory Study (i)

First, install the D3.js

1. Network connection

<src="Https://d3js.org/d3.v4.min.js" ></script>   

2. Command-line installation

CNPM | | NPM install d3--save = I'm using CNPM install D3--save

3. Create a node server

A. CNPM | | NPM Install Express--save + = The previous tutorial has already said Express build server. The next tutorial is to use node to build the local server.

B. Automatically start node CNPM install-g Supervisor when the installation watch file resource changes

When I started the service previously, node Server.js was supervisor Server.js

Server.js

varExpress = require (' Express ');varApp =Express ();varD3 = require (' D3 ')); App.get ('/demo1.js ',function(req,res) {res.sendfile (__dirname+ '/' + ' demo1.js ');}) App.get (‘/‘,function(req,res) {res.sendfile (__dirname+ '/' + ' demo.html ');}) App.get ('/demo.html ',function(req,res) {res.sendfile (__dirname+ '/' + ' demo.html ');}) App.get ('/d3.js ',function(req,res) {res.sendfile (__dirname+ '/' + ' node_modules/d3/build/d3.js ');})varServer = App.listen (' 3000 ',function() {Console.log (' Server start 127.0.0.1 ');})

C.demo.html

<! DOCTYPE html>
Ready to work, or write Hello world!
Second, Hello World
var body = d3.select (' body ');   // Select the BODY element body.append (' H1 ')    // Insert the H1 tag into the BODY element  . Text (' Hello world ')    //  Fill the H1 label with the text "Helloworld  " style (' Color ', ' red ');   // Modify Style font color is red /* Here's a concept: The selection set uses D3.select () or D3.selectall () to return the object after selecting the element, that is, the selection set. In addition, some people will find that D3 can continuously call functions, such as: D3.select (). SelectAll (). Text () This is called chain syntax, and jquery's syntax is very similar, and the usual jquery friends will feel very cordial. Because each method is encapsulated, it returns the current object  return* /
Third, the operation of the element
1. Selecting bindings for elements and elements
/*how to select Element D3.select () in D3: is the first d3.selectall () that selects all the specified elements: is the selection of all D3.select (' P ') of the specified element in the selection page of the first P-label D3.selectall (' P '); Select all P tags in the page*//*How to bind Data datum (): Binds a data to a selection set on the database (): Binds an array to the selection set, and the values of the array are bound to each element of the selection set, respectively*///Datumvardata = ' Hello World ';varp = d3.selectall (' P ');p. Datum (data). Text (function(d,i) {returnThe ' + i + ' p tag data is ' +D;})//data binds an arrayvarDataarr = [1,2,3,4];p. Data (Dataarr). Text (function(d,i) {returnThe ' + i + ' p tag data is ' +D;});
Html
<! DOCTYPE html>
2. Selecting, inserting, and deleting elements
//Selector method 
varH1 = D3.select (' H1 ');//Select (' #app '), select ("H1");varH1 = D3.selectall (' H1 ');//= = Like the above method, like the jquery element selector//inserting elementsvarBODY = d3.select (' body '); Body.append (' H2 '). Text (' I'm an element inserted at the end of the body '); Body.insert (' H2 ', ' #app '). Text (' I'm the H2 tag in front of the element ID is the app ')//same way as in jquery.//Delete ElementvarApp = D3.select (' #app '); App.remove (); //remove an element with an ID of app
Three, column chart
varw = 400,h = 400;varBODY = d3.select (' body ');//Select BODY Elementvardata = [50,100,200,150];varSVG = body.append (' svg ');//Insert the SVG element canvas in the body/*what is SVG svg, a Scalable vector graphic (Scalable vector graphics), is a graphic format for describing two-dimensional vector graphics, an open standard developed by the World Wide Web Consortium. SVG uses XML format to define graphics, in addition to the previous version of IE8, most browsers support SVG, and SVG text can be directly embedded in the HTML display. SVG has the following features: SVG draws a vector graph, so the image is magnified without distortion. Based on XML, you can add JavaScript event handlers for each element. Each graphic is treated as an object, changes the properties of the object, and the graphic changes. Not suitable for gaming applications. Note that in SVG, the positive direction of the x-axis is horizontal to the right, and the positive direction of the y-axis is vertical downward. Canvas is what canvas is to draw 2D graphics through JavaScript, which is the new element in HTML 5. Canvas has the following characteristics: The bitmap is drawn, the image will be distorted when enlarged. Event handlers are not supported. Ability to save images in. png or. jpg format for gaming applications*/Svg.selectall (' Rect ')//Select the Rect (Rectangle label provided in SVG) element in SVG. Data (data)//binding Data. Enter ()//when data.length > rect elements are used, enter (). Update,exit () I'll talk later .. Append (' rect ')//complements the remaining RECT elements of the data.length-rect.length. attr (' x ', 20)//It says the coordinates of the SVG canvas, X is the distance from the horizontal coordinates.. attr (' Y ',function(d,i) {//Y is the same as the relative (0,0) point      return25 *i; }). attr (' Width ',function(d,i) {//set the width of a rectangle      returnD; }). attr (' Height ',function(d,i) {//set the height of the column      return20; }). attr (' Fill ', ' green ');//fill the column with color//just like the fillrect in canvas.
Four, scale
//scale/*in mathematics, the range of x is called the definition field, and the range of Y is called the domain value. The scale in the D3 also has a defined field and a range, respectively, called Domain and ranges. The developer needs to specify the scope of domain and range so that a computational relationship can be obtained. *///Linear scale/*linear scale, which can map a continuous interval to another interval. To solve the problem of column chart width, a linear scale is required. */varDataSet = [0.3,0.9,1,2,2.5];//to map this interval to a range of 0-300.varMax =D3.max (dataset);varLinear =d3.scalelinear (). Domain ([0, Max]) . Range ([0,300]);/*v3:d3.scale.linear () (V3 third edition) returns a linear scale. Domain () and range () set the definition fields and value ranges for the scale bar, respectively. Two functions are used here, which often appear with the scale bar: D3.max () d3.min () V4: The latest version of Scalelinear (); */Console.log (Linear (1));// -//ordinal scales sometimes, defining fields and ranges is not necessarily contiguous. For example, there are two arrays:varindex = [0, 1, 2, 3, 4];varcolor = ["Red", "Blue", "green", "yellow", "black"];varordinal =d3.scaleordinal (). Domain (index). Range (color); Console.log (Ordinal (1))//Blue So there's a correspondence between the two arrays/*v3:d3.scale.ordinal (). Domain (). range (); V4:d3.scaleOrdinal ( ). Domain (). Range ()*///Use a bit of canvas svg to convert a column chart to a histogram with the above line scale as the canvas .Svg.selectall (' Rect '). Data (DataSet). Enter (). Append (' Rect '). attr (' X ', 20). attr (' Y ',function(d,i) {returnI * 25; }). attr (' Width ',function(d,i) {returnlinear (d); }). attr (' Height ',function(d,i) {return20; }). attr (' Fill ', ' blue ');
V. Create a column chart with axes
//Create a column chart with an axisvarw = 600,h = 400;varBODY = d3.select (' body ');//Select BODY ElementvarSVG = body.append (' svg '). attr (' width ', w). attr (' height ', h);//Insert the SVG element canvas in the bodyvarDataSet = [0.3,0.9,1,2,2.5];//to map this interval to a range of 0-300.varMax =D3.max (dataset);varLinear =d3.scalelinear (). Domain ([0, Max]) . Range ([0,300]);//Use a bit of canvas svg to convert a column chart to a histogram with the above line scale as the canvas .Svg.selectall (' Rect '). Data (DataSet). Enter (). Append (' Rect '). attr (' X ', 20). attr (' Y ',function(d,i) {returnI * 25; }). attr (' Width ',function(d,i) {returnlinear (d); }). attr (' Height ',function(d,i) {return20; }). attr (' Fill ', ' Blue ');//Add axesvarAxis = D3.axisbottom ()//V4:axisbottom represents the downward scale v3:d3.svg.axis (). scales (linear). Orient (' bottom '). Ticks (5) V4 and V3 are really big differences.. scale (linear)//Specify a scale bar. Ticks (5);//Specify the number of ticksSvg.append (' G ')//SVG provides tags that you do not know can be used to familiarize yourself with the next SVG. attr (' Transform ',function(d,i) {return' Translate (' + 20 + ', ' + 25*5 + ') ';//Move the axis to the corresponding position}). Call (axis);
六、一个 Complete histogram (rectangle, axis, a comprehensive application of the preceding several)
varW = 500,h=500;varBODY = d3.select (' body ');//Select BODY Element//Create an SVG canvas and set the size to 500*500varSVG = body.append (' svg '). attr (' width ', w). attr (' height '), h);//define an arrayvarDataSet = [10, 20, 30, 40, 33, 24, 12, 5];//y-axis scale range[0-400]varLineary = D3.scalelinear (). Domain ([0,d3.max (DataSet)]). Range ([400,0]);//x-axis scale [0,400] [0,8];varLinearx = D3.scalelinear (). Domain ([0,8]). Range ([0,400]);varAxisy = D3.axisleft (). Scale (Lineary). Ticks (8);varAxisX = D3.axisbottom (). Scale (Linearx). Ticks (8); Svg.append (' G '). attr (' Transform ', ' translate (30,80) ')//y-Axis coordinates. Call (Axisy); Svg.append (' G '). attr (' Transform ', ' translate (30,480) ')//x-coordinate. Call (AxisX); Svg.selectall (' Rect '). Data (DataSet). Enter (). Append (' Rect '). attr (' X ',function(d,i) {returnLinearx (i) + 70; }). attr (' Y ',function(d,i) {returnLineary (d) + 80; }). attr (' Height ',function(d,i) {return400-Lineary (d); }). attr (' Width ', 20). attr (' Fill ',function(d,i) {returnD3.color ("HSL (" +i * 17+ ", 80%, 50%)")  });
Seven, the first part is finished
The main is to understand how to bind the data, how to select the element. I used to look at the V3 version. Later with NPM comes down the package is V4 found a lot of APIs have changed. Still have to grope for some time.
Let's talk about it for the time being.
 
D3.js Introductory Study (i)