D3.js make a simple chart!

Column chart is one of the simplest visual icons, mainly composed of rectangles, text labels, and axes. For the sake of simplicity, this article draws only the rectangular parts to illustrate how to use D3 to draw in the SVG canvas.

First, what is the canvas?

The first few chapters of the processing objects are HTML text, no graphics involved in the production.

To draw, the first thing you need is a drawing of the "canvas".

HTML 5 provides two powerful "canvases": SVG and canvas.

1.1. What is SVG?

SVG, a scalable vector graphic (Scalable vector graphics), is a graphic format for describing two-dimensional vector graphics and is an open standard developed by the World Wide Web Consortium.

SVG uses XML format to define graphics, in addition to the previous version of IE8, most browsers support SVG, and SVG text can be directly embedded in the HTML display.

SVG has the following features:

• • • SVG draws a vector graph, so zooming in on an image is not distorted.
    • Based on XML, you can add JavaScript event handlers for each element.
    • Each graphic is treated as an object, changes the properties of the object, and the graphic changes.
    • Not suitable for gaming applications.

1.2. What is Canvas?

Canvas is a new element in HTML 5 that draws 2D graphics through JavaScript.

Canvas has the following features:

• • • The bitmap is drawn, and the image is distorted when zoomed in.
    • Event handlers are not supported.
    • Ability to save images in. png or. jpg format
    • For gaming applications

Second, add the canvas

D3 Although there is no explicit requirement to draw in SVG, D3 provides a number of SVG graphics generators that support only SVG. Therefore, it is recommended that you use the SVG canvas .

The code that uses D3 to add SVG to the BODY element is as follows.

var width = +;  // width of canvas var height = +;   // the height of the canvas var svg = d3.select ("Body")     // Select the BODY element in the document    . Append ("SVG")          //  Add an SVG element    . attr ("width", width)       // set width    . attr ("height", height);    // Set Height

With the canvas, you can then draw on the canvas.

Third, draw the rectangle

Draw a horizontal column chart. Draws only rectangles, not text and axes.

In SVG, the element label for a rectangle is rect. For example:

< svg > < rect ></ rect > < rect ></ rect > </ svg >

There is no rectangle attribute in the above rect. The properties of a rectangle, commonly used are four:

• • X: The x-coordinate of the upper-left corner of the rectangle
  • Y: the y-coordinate of the upper-left corner of the rectangle
  • Width: thickness of rectangle
  • Height: width of the rectangle

Note that in SVG, the positive direction of the x-axis is horizontal to the right, and the positive direction of the y-axis is vertical downward.

Now give a set of data that you want to visualize. The data are as follows:

var dataset = [  +, A, a. // data (representing the width of the rectangle)

For simplicity, we use the size of the numeric value to represent the pixel width of the rectangle (which is not a good approach later). Then, add the following code.

var rectheight =;   // the pixel height of each rectangle (including white space) Svg.selectall ("rect").    data (DataSet).    Enter ()    . Append ("rect").    attr ( "x")    . attr ("y",function(d,i) {         return i *  rectheight;    })    . attr ("width",function(d) {         return  D;    })    . attr ("height", rectHeight-2)    . attr ("Fill", "steelblue");

This code adds the same number of rectangles as the length of the dataset array, using the following statement:

Svg.selectall ("rect")   // Select all rectangles within SVG    . Data (DataSet)  // bound array    . Enter ()        // Specify the Enter portion of the selection set    // Add a sufficient number of rectangle elements

This code will often appear in the D3 code later, so be sure to keep it in mind. What is the mechanism of its function is not discussed in depth at present, only the reader must remember that when

Use this method to add enough elements when there is data, and there are not enough graphic elements.

Once you have added the elements, you need to assign values to the attributes of each element separately. The function (d, i) is used here, as already mentioned, D represents the data bound to the current element, and I represents the index number. When assigning a value to a property, it is necessary to use the bound data as well as the index number.

The last line:

. attr ("Fill", "steelblue");

is to set the color of the rectangle element. In general, it is best to write the form of an external CSS for easy categorization and modification.

D3.js make a simple chart!