[3] Use D3.js to make a simple chart!

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

In the previous sections, all the text is processed, and this section will use D3.js to make a simple column chart.

There are many ways to do a column chart, such as using an HTML div tag, or using SVG.

It is recommended to use SVG to do all kinds of graphics. SVG means scalable vector graphics (Scalable vector graphic), SVG uses XML format to define images, it is unclear what SVG friends please first in W3cschools learning, the content is very small, quickly mastered, do not need to remember the various tags, Just know what it's about, and then check it out when you're done.

Let's look at the following code:

<script src= "Http://d3js.org/d3.v3.min.js" charset= "Utf-8" ></script>  <script>var width = 600; var height = 600;var svg = d3.select ("Body"). Append ("SVG").   attr ("width", width)   . attr ("height", height); var DataSet = [];svg.selectall ("rect").   data (DataSet).   enter ().   Append ("rect").   attr (" X ","   attr ("Y", function (d,i) {return i *;   })   . attr ("width", function (d,i) {return d *;   })   . attr ("height")   . attr ("Fill", "red");   </script>

The results of the above code are as follows:

This makes a column chart. Analyze the above code:

3–4: Defines two variables, representing the width and height of the SVG drawing field, respectively.

第5-7: After selecting body, insert SVG in body and use attr to add attributes to SVG. Adding a property with attr is similar to adding a property href to the <a> element in HTML.

Line 9th: Is the data to be used.

Line 11th: Indicates that all RECT elements are selected in SVG, but in fact there is no rect element in SVG at this time. This is a very special place for D3, that is, it can choose an empty set. Don't be surprised, look at line 13th.

Line 12th: Represents the data binding to this SVG.

Line 13th: Enter means that when the desired element (rect here) is less than the element of the bound data collection (here is a dataset), the location is automatically added so that it is as many as the number of data collections. It 's important here .

Line 14th: Immediately preceding line, append element rect. 11-14 lines often appear together, be careful .

第15-27: Sets the attributes of a RECT element, such as position, length, color, and so on.

The above column chart, for each column is manually set length, in practice we often want to give a maximum value, let the column automatically adjust the percentage according to the maximum value, show out, how to do? Insert the following code:

var wx = D3.scale.linear ()        . Domain ([0,d3.max (DataSet)])                . Range ([0,500]);

D3.scale.linear () is used to generate a linear, scalable scale with an initial domain of [0, 1] and an initial range of [0, 1], where [] represents the range. Now we set domain to [0, D3.max (DataSet)], which is the maximum value from 0 to the dataset. Range is set from 0 to 500. This means that if the data is 45, 500 is returned, and if 30, 333.333 is returned.

Next, simply assign a value to the width property when adding a rect to the variable WX.

Svg.selectall ("rect").   data (DataSet).   enter ().   Append ("rect").   attr ("x").   attr ("Y", function (d,i) {return i *;   })   . attr ("width", WX)           //Note here   . attr ("Height", "page")   . attr ("Fill", "red");

in this way, the width changes automatically as the data is bound.