Home > Developer > Web Develop
Figure 1. Column Chart
1. Column ChartExamples of the previous chapters are the processing of words. This chapter will use D3 to make a simple column chart. There are many ways to make a column chart, such as using HTML <div> tags, or drawing on SVG.
SVG, you can scale vector graphics (Scalable vector graphic), using XML format to define the graphics, you can learn the relevant syntax of SVG in W3school, do not need to remember all the tags, use the time to check again.
Let's look at the following code:
<script src= "Http://d3js.org/d3.v3.min.js" charset= "Utf-8" ></script> <script>varwidth = 600; varHeight = 600; varSVG = D3.select ("Body"). Append ("SVG"). attr ("Width", width). attr ("Height", height); varDataSet = [30, 20, 45, 12, 21 ]; Svg.selectall ("Rect"). Data (DataSet). Enter (). Append ("Rect"). attr ("X", 10). attr ("Y",function(d,i) {returnI * 30; }). attr ("Width",function(d,i) {returnD * 10; }). attr ("Height", 28). attr ("Fill", "Red"); </script>
As shown in result 1, the code is explained as:
Line 3–4: Defines two variables, representing the width and height of the SVG draw box.
Line 5–7: After selecting <body>, insert <svg> in <body> and use attr to add properties to <svg>. The effect of adding properties with attr is similar to <a href= "..." in HTML. ></a> Add a property href to a.
Line 9th: 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 () indicates that when the desired element (<rect>) is less than the element (dataset) of the bound data collection, the location is automatically added so that it is as many as the number of data collections. This is important here, which is explained in detail later in this chapter.
Line 14th: Immediately preceding line, add element <rect>. 11-14 lines often appear together, to note, if not understand, you can temporarily do not have to delve into.
Line 15–27: Set the properties of the <rect> element, such as position, length, color, etc.
2. ScaleThe 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, 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 scale bar of a linear function whose initial definition domain is [0, 1], the initial range range is [0, 1], where [] represents the scope. 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.
The scale is assigned to WX, and it is important to note that WX here is a function. At present, not to delve into.
Next, simply assign a value to the width property when adding <rect> to the variable WX.
Svg.selectall ("rect"). data (DataSet). enter (). Append ("rect"). attr ("x", 10 ) . 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.
"D3.js Starter Series-3" Make a simple chart!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
