How to use D3 graphics library in JavaScript

and introduced in the tag: <script src =http://d3.v2.min.js></script>

To realize data visualization with D3, you first need to define the data. We will use JSON-formatted data. Of course, you can use other types of data.

var data = {"East": [{"Ordernum": 12}

, {"Ordernum": 20}

, {"Ordernum": 30}

, {"Ordernum": 40}

, {"Ordernum": 40}

]};

The Select command in D3, the primary feature is the selection of elements to be manipulated by the data.

The following is the formal writing of the D3 statement. In the script tag, we define a Dirst method, which is defined by the data.

Function Dirst () {

D3.selectall ("Body")

. Append ("SVG")

. attr ("width", "1000")

. attr ("height", "600")

. Style ("Background", "pink")

. SelectAll ("Circle")

. Data (Data.east)

. Enter ()

. Append ("Circle")

D3.selectall ("Circle")

. attr ("CX", function (d) {return math.random () *900+ (D.ORDERNUM+10)})

. attr ("Cy", function (d) {return math.random () * (+) + (D.ORDERNUM+10)})

. attr ("R", function (d) {return d.ordernum})

. Style ("Fill", red)

. Style ("Stroke", "black")

. Style ("Stroke-width", 1)

};

D3.select ("Body") we chose the body of this tag element.

Here we begin by introducing a concept, SVG: A graphical format used to describe two-dimensional vector graphics.

As a result, the performance of any SVG graphic must be implemented within the SVG.

. Append ("SVG") adds an SVG label.

and set the svg width, height and background color.

. attr ("width", 300), notice that many of the properties of the SVG tag are not ' px '.

Create the circle element on SVG. Each circle element contains a set of data. An array of Ordernum members.

As with mathematical concepts, if you want to determine a circle, you need to know his center and radius.

. attr ("CX", function (d) {return math.random () *900+ (D.ORDERNUM+10)})

. attr ("Cy", function (d) {return math.random () * (+) + (D.ORDERNUM+10)})

is used to determine the center of the x and Y axes respectively. We use random numbers in the callback function to implement the circle's x-axis and y-axis.

Here you need to show that the center CX range is between 10 and 900.

Because we have an SVG width of 1000. If the center of the x-axis is approximately equal to 1000 or less than 0. Then the circle we created will jump out of the width of our SVG on the x axis.

The same is true for the Y axis.

. attr ("R", function (d) {return d.ordernum}) is the radius of a circle and is also determined using a callback function. Returns a value that is a data array.

. Style ("Fill", red)

. Style ("Stroke", "black")

As shown above, we also set the circle fill color and border color. Unlike CSS, the border color is defined with Stroke-border, similar to Border-color in CSS. And fill is the color of the fill.

This has already implemented a simple display of data through D3 into graphics. Other features of D3 will continue to be practiced later.