Using D3 to draw a chart can make your data more intuitive.
Before using D3 to load the D3 library, there are two ways, one is the online loading <script type= "Text/javascript" src= "Http://d3js.org/d3.v3.js" ></SCRIPT> Another is to download D3 library, I am directly inside Baidu search "D3 js download" and then download, after downloading into the project, and then introduced into the HTML page inside it can be. In this statement, most of the time we have introduced the JS file to the bottom of the page, this is because some of the methods in JS to use some content in the HTML, the introduction of JS file on the last side will not be wrong.
1.html Code
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <Linkrel= "stylesheet"href= "Css/style.css" /> </Head> <Body> <DivID= "Container"></Div> </Body> <Scripttype= "Text/javascript"src= "Js/d3.js" ></Script> <Scripttype= "Text/javascript"src= "Js/index.js" ></Script></HTML>
2.CSS style
{ width: 500px; height: 250px; background-color: #ccc; margin: 0 Auto; margin-top: 100px;}3.index.js code (the drawing of the canvas is done here, the D3 library is used here, so the introduction of this JS file is under D3)
// get Div, add svg to the inside var svg = d3.select ("#container"). Append ("svg:svg")// Insert SVG in "container". attr ( "width", h)// Set the width of SVG . attr ("height", up to)// set SVG height // Add g element d3.select ("SVG")// Use the "select" function to select SVG. Append ("G")// Insert g in SVG. attr ("Transform", "Translate (50,25)")// Set the offset of G
The above is in developer mode, we can see that both SVG and G are added to the Div, so that the drawing of the canvas is done. Everyone is learning and practicing is to use the browser's developer mode, so it is easy to modify.
Making a chart using D3 (1)--canvas drawing
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
