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

My personal blog is: www.ourd3js.com

The csdn blog is blog.csdn.net/lzhlzz.

Please indicate the source for reprinting. Thank you.

As mentioned above, the text is processed. In this section, D3.js is used as a simple column chart.

There are many ways to create a column chart, such as using HTML div labels or svg.

SVG is recommended for various graphics. SVG indicates Scalable Vector Graphics. SVG defines images in XML format. If you are not clear about what SVG is, please study w3cschools with little content, you will soon be able to master it. You don't need to remember all kinds of labels. You just need to know what it is, and check it again when you use it.

Let's take a 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 = [ 30 , 20 , 45 , 12 , 21 ];svg.selectAll("rect")   .data(dataset)   .enter()   .append("rect")   .attr("x",10)   .attr("y",function(d,i){return i * 30;   })   .attr("width",function(d,i){return d * 10;   })   .attr("height",28)   .attr("fill","red");   </script>

The result of the above Code is as follows:

In this way, a column chart is created. Analyze the above Code:

Row 3-4: defines two variables, indicating the width and height of the SVG plot field.

Row 5-7: indicates that after selecting the body, insert svg into the body and use attr to add attributes to svg. Adding an attribute with attr is similar to adding an attribute href to the <a> element in HTML.

Row 3: The data to be used.

Row 11th: Selects all the rect elements in svg, but in fact there is no rect element in svg. This is a special part of D3, that is, it can select an empty set. Do not be surprised. Please refer to the 13th rows.

Row 12th: binds the data to the svg.

Row 13th: enter indicates that a location is automatically added when the required element (rect here) is less than the element of the bound data set (dataset here, make it as many as the number of data sets. This is important.

Row 14th: append element rect next to the previous row. Lines 11-14 often appear together. Note that.

Row 15-27: Set attributes of the rect element, such as position, length, and color.

In the column chart above, the length of each column is manually set. In actual use, we often want to set a maximum value so that the column will automatically adjust the percentage according to the maximum value and display it. What should we 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. Its initial domain is [0, 1], and the initial range is [0, 1]. [] indicates the range. Now we set domain to [0, d3.max (dataset)], that is, the maximum value from 0 to dataset. Range is set to 0 to 500. This indicates that if the data is 45, 500 is returned. If the data is 30, 333.333 is returned.

Next, you only need to change the value of the width attribute to the wx variable when adding the rect.

Svg. selectAll ("rect "). data (dataset ). enter (). append ("rect "). attr ("x", 10 ). attr ("y", function (d, I) {return I * 30 ;}). attr ("width", wx) // note this. attr ("height", 28 ). attr ("fill", "red ");

In this way, the width will automatically change with the bound data.