D3JS Study Notes

First, the introduction of D3.js

Can be downloaded to the official website , and then introduced to the project.

or directly with D3 remote JS, as long as the introduction of the following line of code can be used.
Note: D3 and Baidu Echarts in the Esl.js conflict, D3 will expire.

<script src= "Http://d3js.org/d3.v3.min.js" charset= "Utf-8" ></script>

Second, choose to create a graphic location

var svg = d3.select ("#main")// Select the Id=main element in the page, or you can select the div,p tag directly, for example. Select ("div")  . Append ("SVG")// Generate SVG tags  . attr ("width", W)// Set the width of the SVG area  . attr ("height" , h); // set the height of the SVG area

There is a blank svg area on the page with a width of W and a height of H. (d3 Default length unit is PX, can omit do not write px)
This height can also be obtained from the Div in the page, for example:

var h = document.getelementsbyclassname ("Panel-body"). offsetheight;

Third, binding data

varDataSet = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,        11, 12, 15, 20, 18, 17, 16, 18, 23, 25];//data for generating a column chartSvg.selectall ("rect")//Select Rect, the idea is that there is no rect in the page (rect is an abbreviation for the English rectangle (rectangle) and is a graphical function built into SVG). Data (DataSet)//Incoming Data. Enter ()//this enter in order to cycle through the non-existent rect elements, that is, the repeating rectangle, based on the number of datasets in the previous row. Append ("rect")//fixed syntax, select selected First, after enter build, and then append bound. attr ("X", 0)//the current upper-left corner coordinate position of the rectangle. attr ("Y", 0). attr ("width", 20)//width of Rectangle. attr ("height", 100);

The above code to run will generate a black column, in fact, generated 20 pillars, in the page review elements can be found to have 20 SVG, but the upper left corner coordinate position, so the generation of 20 are stacked together, in fact, SVG drawing is still the order of the points, that is, after the generated graphics will cover the previous, This is common sense, so it is not explained in detail.

There is also a knowledge point: attr and style can also be changed element,attr can change any property, style can only change style.

strongly recommended: SVG drawing basic Tutorials