Home > Developer > Web Develop
Bottom line: D3.js is a JavaScript library that manipulates data!
Start with a simple exampleLearning a new thing is very simple, we first, and then we will change its sentence, contrast the effect of the present to learn the effect of this property, OK, here is what we want to do:
Does it look quite complicated? Let's take a look at his source code in the end what is it?
Does it look quite complicated? Let's take a look at his source code in the end what is it?
<!doctype html>It doesn't look very complicated, so don't be afraid, let's do a piece of dissection on him.
HtmlThe above code includes two sections of styles and scripts, and his structure can be simplified to:
Css<! DOCTYPE html><meta charset= "Utf-8" ><style> the CSS section </style><body><script type= "text/ JavaScript "src=" D3/d3.v3.js "></script><script> the D3 JavaScript code is here</script></body >The CSS section mainly sets the style of the element, the CSS style of the above chart is
body{font:12px Arial;} path{Stroke:steelblue; Stroke-width:2; Fill:none;}. Axis Path,.axis line{Fill:none; Stroke:grey; Stroke-width:1; Shape-rendering:crispedges;}We can change the style of the chart to change the display effect, for example setting path{stroke:red; The effect curve will turn red
Similarly, if I change fill to red, we'll get a red fill
where "shape-rendering" is a shape rendering property, he has four properties, and a value of "crispedges" indicates that the shape will be displayed smoothly. With more properties ask your classmates to learn the SVG tutorial.
D3 JavaScript
Set margins and chart size. We set the size of the canvas to: width:600,height:270, use a margin object to store the chart margin information, calculate the width and height of the chart
var margin = {top: 30, right: 20, bottom: 30, left: 50},width = 600 - margin.left - margin.right,height =
270 - margin.top - margin.bottom;
//GET&NBSP;THE&NBSP;DATA&NBSP;&NBSP;&NBSP;&NBSP;D3.TSV" ("DATA/DATA.TSV", function ( Error, data) { data.foreach (function (d) { d.date = parsedate (d.date); d.close = +d.close;
}); Here we get data from DATA.TSV This file, the so-called TSV file, simply is to use tab space to separate data from a data format, for example, our DATA.TSV file part of the data is this
Date close1-may-12 58.1330-apr-12 53.9827-apr-12 67.00
Of course, D3 allows the imported data to be more than just this file format, the data format he supports can be:
text : A plain old piece of the text that have options to being encoded in A particular it
JSON: This is the afore mentioned JavaScript Object Notation.
XML: Extensible Markup Language is a Language that's widely used for encoding documents in a human readable forrm.
HTML: Hypertext Markup Language is the Language used for displaying Web pages.
CSV: Comma separated Values is a widely used format for storing data where plain text
Information is separated by (wait for it) commas.
TSV: Tab separated Values is a widely used format for storing data where plain text
Information is separated by a tab-stop character.
Data.foreach (function (d) {
This line of code can be seen as dividing the data into a single line, where each line has a date and a close value and performs the following processing on a row of data:
D.date = Parsedate (d.date); --Format the d.date data with the previously defined Parsedate method to return the results to D.date
D.close = +d.close; --Convert D.close to a number
var parsedate = D3.time.format ("%d-%b-%y"). Parse;Format () has a lot of formats, we can according to their own needs to set their own format, of course, the format to be in the document data in the format corresponding to Oh, but now I have the question is, how to make time display in Chinese? If any students know, please tell me, I will be very grateful!
Set the area (Domains) and Range (Ranges) of the horizontal and vertical axes direction
var x = D3.time.scale (). Range ([0, Width]), var y = d3.scale.linear (). Range ([height, 0]);
This code is meant to allow us to import the data to match the size of the chart, range knows the size of the chart range, he is a size. This code tells D3 we're going to draw something on the x-axis, and these things are a time/date entity.
X.domain (d3.extent (data, function (d) {return d.date;})); Y.domain ([0, D3.max (data, function (d) {return d.close;})]);While domain refers to the area of data, extent returns the smallest date to the largest date such a span, so the smallest date corresponds to the minimum value of the range above 0, we can use a picture to visualize the expression:
Set axes
Let's take a few lines of code here:
var Xaxis = D3.svg.axis (). scale (X). Orient ("Bottom"). Ticks (5), var yaxis = D3.svg.axis (). scale (Y). Orient ("left"). Ticks (5);The axis axis initialization method is called by D3.svg.axis () and then called. Scale (x) to set the scaling for the axis with the x defined previously,. Orient () sets the position of the scale relative to the axis,. Ticks () It's enough to tell D3 to set almost a few ticks on the axis, say you want to D3 your x-axis by about 10 ticks: var Xaxis = D3.svg.axis (). scale (X). Orient ("Bottom"). Ticks (10), the effect is as followsAdd data to line () Draw Lines function
var valueline = D3.svg.line (). x (function (d) {return x (d.date);}). Y (function (d) {return y (d.close);});The use of the line function can be referred to here
Add a canvas
var svg = d3.select ("Body"). Append ("SVG"). attr ("width", Width + margin.left + margin.right). attr ("height", height + Margin.top + margin.bottom). Append ("G"). attr ("transform", "translate (" + Margin.left + "," + Margin.top + ")");D3.select ("Body") selects the BODY element, then adds a child element "SVG" to the body, sets some attributes for the SVG, and then adds a "G" element to "SVG" and sets some attributes.
Start drawing things.
Svg.append ("path")//ADD the Valueline path. . attr ("D", Valueline (data));Let's add a path path to the SVG we just created, and then draw a path with the previously defined Valueline. And then we'll draw the X and Y axes.
Svg.append ("G")//Add the X axis attr ("Class", "X axis"). attr ("transform", "translate (0," + height + ")"). Cal L (Xaxis); Svg.append ("G")//Add the Y axis attr ("Class", "Y axis"). Call (YAxis);Two sections the last. Call () function to define the previous axis initialization method to draw an axis.
Ok! , so far our goal has reached, the first to achieve the effect we have achieved, but there are many things we have not learned, such as the axis of the label? OK, next section we'll add labels to the axes!
D3.js Learning
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
