D3js-draw two-dimensional coordinate axes (X and Y axes)

D3js-draw two-dimensional coordinate axes (X and Y axes)

Result Display diagram:

1. first introduce the js configuration file of D3js

 

<script type="text/javascript" src="js/d3/d3.js"></script><script type="text/javascript" src="js/d3/d3.min.js"></script>

 

 

2. Define some variables

 

var width =600;   var height=600;   var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[600, 150]  ];   var padding=30;

Width and height are then used to define the size of SVG (Extensible vector graphics) and the processing of the graphics position. Dataset is an array of points. Padding is used to process the distance between the X axis and the Y axis.

 

3. Define the scale of the X axis and Y axis

 

// Obtain the scale function var xScale = d3.scale for the X and Y axes. linear (). domain ([0, d3.max (dataset, function (d) {return d [0];})]). range ([padding, width-padding * 2]); var yScale = d3.scale. linear (). domain ([0, d3.max (dataset, function (d) {return d [1] ;})]). range ([height-padding, padding]); <

D3.scale. linear () specifies the scale to use a linear function.

 

D3.max (dataset, function (d)

{Return d [0];

})

D3.max () is the maximum value. The above indicates the maximum value of the first number (d [0]) of array elements in dataset, and d [1] is the second number of arrays,

As shown in

 

Domain specifies the range of values on the coordinate axis. Range specifies the position of the coordinate axis endpoint. The coordinate origin of svg is the upper left corner, the right is positive, the downward is positive, and the Y axis is backward to the bottom up, So (0, height) is the coordinate origin of the coordinate axis.

 

/* Moderate mathematics: an independent variable is x, and the dependent variable is a function of y. The value range of x is a defined field, and that of y is a value field.

Domain indicates a defined domain,

Range indicates a value range. */

4. Add an SVG

 

var svg = d3.select("body")   .append("svg")   .attr("width",width)   .attr("height",height);

Adds an svg tag to the body tag.

 

Google press F12 to open a window similar to the developer mode, which contains important information such as page layout. For example, we can see that an svg tag is created.

Note that you must set the height and width of svg. If there is no such configuration, the following occurs:

It just shows a little bit. The Custom size cannot meet our requirements.

5. Define the X and Y axes.

 

var xAxis = d3.svg.axis()   .scale(xScale)   .orient("bottom")   .ticks(6);      var yAxis = d3.svg.axis()   .scale(yScale)   .orient("left")   .ticks(6);

Use axis to customize the axis, d3.svg. axis-create a new axis generator (create an axis generator ).

 

Scale is a function that obtains the value range based on the given predefined domain. (Get the range value corresponding to a given domain value .)
Orient has four parameters (left, right, top, and bottom) that define the coordinate axis position.

Ticks defines the maximum number of scales except the minimum and maximum values on the coordinate axis. D3js sometimes sets the number of scales based on its own situation.

6. Create the X and Y axes in svg.

 

Svg. append ("g "). attr ("class", "axis "). call (xAxis ). attr ("transform", "translate (0," + (height-padding) + ")"). append ("text"); // Add axis description. text ("days "). attr ("transform", "translate (" + (height-padding) + ", 0)"); // specify the coordinate svg described by the coordinate axis. append ("g "). attr ("class", "axis "). attr ("transform", "translate (" + padding + ", 0 )"). call (yAxis ). append ("text") // Add axis description. text ("person "). attr ("transform", "translate (0," + (padding) + ")"); // specify coordinates for the coordinate axis description

Attr ("calss", "axis") indicates that a class is defined. This class is used to set styles, which is the same as the class styles in css.

 

Attr ("transform", "translate (" + padding + ", 0)"); transform indicates translation, used to determine the location
Call (xAxis); indicates calling the function defined above to execute the function. It is a principle that java calls the function through the method name, but java does not need to call the function.

7. complete code

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>

D3 test1/title> <Script type = "text/javascript" src = "js/d3/d3.js"> </script> <script type = "text/javascript" src = "js/d3/d3.min. js "> </script> <script type =" text/javascript "> // defines the variable var width = 600; var height = 600; var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600,150]; var padding = 30; // obtain the scale function var xScale = d3.scale for the X and Y axes. linear (). domain ([0, d3.max (dataset, function (d) {return d [0];})]). range ([padding, width-padding * 2]); var yScale = d3.scale. linear (). domain ([0, d3.max (dataset, function (d) {return d [1] ;})]). range ([height-padding, padding]); var svg = d3.select ("body "). append ("svg "). attr ("width", width ). attr ("height", height); // definen x axis & y axis var xAxis = d3.svg. axis (). scale (xScale ). orient ("bottom "). ticks (6); var yAxis = d3.svg. axis (). scale (yScale ). orient ("left "). ticks (6); // creat x axis & y axis svg. append ("g "). attr ("class", "axis "). call (xAxis ). attr ("transform", "translate (0," + (height-padding) + ")"). append ("text "). text ("days "). attr ("transform", "translate (" + (height-padding) + ", 0)"); svg. append ("g "). attr ("class", "axis "). attr ("transform", "translate (" + padding + ", 0 )"). call (yAxis ). append ("text "). text ("person "). attr ("transform", "translate (0," + (padding) + ")"); </script>