The 3rd section makes an icon, but does not add a corresponding axis for it, so you don't know how long each bar is. This section makes an axis.
The axes in D3 are in the form of SVG diagrams, which is why the method of SVG is used in the 3rd section to do column charts. In the 4th section, we explain the usage of scale, and we need to use the scale when we do the axes. In the 4th section, we say that scale is a function, and the axes in this section are a function, but the usage is a little different.
Look at the following code, we define the data separately, scale (proportional), axis:
[JavaScript]View PlainCopy
- var DataSet = [30, 20, 45, 12, 21];
- var XScale = D3.scale.linear ()
- . domain ([0,d3.max (DataSet)])
- . Range ([0,500]);
- var axis = D3.svg.axis ()
- . Scale (XScale)
- . Orient ("bottom");
1-4 rows are defined data and scale (proportional), and the content of the scale can be used in a section.
5-7 is the definition axis:
- D3.svg.axis () Call this function to generate an axis function
- Scale () This function is used to specify the scales (proportions) of the axes
- Orient () This function is used to specify the dividing point of the axis and the direction of the number in which to display. Bottom is displayed below the axis.
The code for the axis is drawn as follows:
[JavaScript]View PlainCopy
- Svg.append ("G")
- . Call (axis);
Adding a g,g in SVG is an attribute in SVG, which is the group meaning, which represents a set of things, such as a group lines, rects, circles actually the axis is composed of these things. It also calls a call function, which is more important. In D3, call is the equivalent of defining a function and then giving it the selected element, which is equivalent to the following code:
[JavaScript]View PlainCopy
- function foo (selection) {
- Selection
- . attr ("name1", "value1")
- . attr ("name2", "value2");
- }
- Foo (D3.selectall ("div"))
This code is equivalent to:
[JavaScript]View PlainCopy
- D3.selectall ("div"). Call (foo);
So Svg.append ("G"). Call (axis) is equivalent to passing the selected G element to the axis function. After the call, the axes are displayed in the appropriate SVG.
You can also define several CSS styles to change the weight of the axes, fonts, and so on. The Transform property is used to move the position of the axis in SVG.
[JavaScript]View PlainCopy
- Svg.append ("G")
- . attr ("Class","axis")
- . attr ("transform","translate (10,160)")
- . Call (axis);
The complete code is as follows:
[JavaScript]View PlainCopy
- <style>
- . Axis Path,
- . Axis line{
- Fill:none;
- Stroke:black;
- Shape-rendering:crispedges;
- }
- . Axis text {
- Font-family:sans-serif;
- font-size:11px;
- }
- </style>
- <body>
- <script src="http://d3js.org/d3.v3.min.js" charset="Utf-8" ></script>
- <script>
- var width = 600;
- var height = 600;
- var dataset = [30, 20, 45, 12, 21];
- var svg = d3.select ("Body"). Append ("SVG")
- . attr ("width", width)
- . attr ("height", height);
- var XScale = d3.scale.linear ()
- . domain ([0,d3.max (DataSet)])
- . Range ([0,500]);
- var axis = D3.svg.axis ()
- . Scale (XScale)
- . Orient ("bottom");
- Svg.append ("G")
- . attr ("Class","axis")
- . attr ("transform","translate (10,160)")
- . Call (axis);
- Svg.selectall ("rect")
- . Data (DataSet)
- . Enter ()
- . Append ("rect")
- . attr ("X", ten)
- . attr ("y",function (d,i) {
- return I * 30;
- })
- . attr ("width", XScale) //Note here
- . attr ("height",)
- . attr ("Fill","Red");
- </script>
Results such as:
Blog for: www.ourd3js.com csdn Blog: blog.csdn.net/lzhlzz
"D3.js Starter Series---5" How to add axes
