Home > Developer > Web Develop
Drawing SVG Images
1. Adding SVG elements
2. Add the G element, the G element is a grouped element, which is equivalent to the DIV element in HTML
3. Drawing Images
4. Drawing axes
-----------------------------------------------------------------------------
D3 Drawing Idle Linear curve example
Html:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>d3.js</title>
<link rel= "stylesheet" type= "Text/css" href= "Css/style.css" >
<body>
<div id= "Container" >
</div>
<script type= "Text/javascript" src= "Js/d3.v3.js" ></script>
<script type= "Text/javascript" src= "Js/index.js" ></script>
</body>
Index.js:
var width = 500,
Height = 250,
margin = {Left:50,top:30,right:20,bottom:20},
G_width = Width-margin.left-margin.right,
G_height = Height-margin.top-margin.bottom;
Svg
var svg = d3.select ("#container")//Select an element that already exists in the HTML and add an SVG element to the element
. Append ("SVG")
. attr ("width", width)
. attr ("height", height)
var g = d3.select ("SVG")
. Append (' G ')
. attr ("transform", "translate (" + Margin.left + "," + Margin.top + ")")//Offset G element
var data = [1,3,5,7,8,4,3,7];
var scale_x = d3.scale.linear ()//x axis scaling function, domain is input range, range is output range
. domain ([0,data.length-1])//input
. Range ([0,g_width])//out
var scale_y = d3.scale.linear ()//x axis scaling function
. domain ([0,d3.max (data)])//input input range
. Range ([g_height,0])//out Output Range
var line_generator = D3.svg.line ()
. x (function (d,i) {return scale_x (i);}) I 0 1 2 3 4 5 6 ...
. Y (function (d,i) {return scale_y (d);}) D 1 3 5 7 8 4 3 7
. Interpolate ("cardinal")//function of drawing curves
G
. Append ("path")
. attr ("D", Line_generator (data))//D is the abbreviation for Path-data
///
var x_axis = D3.svg.axis (). Scale (scale_x),//x axis
Y_axis = D3.svg.axis (). Scale (Scale_y). Orient ("left");//y axis
G.append ("G")
. Call (X_axis)
. attr ("transform", "translate (0," + g_height + ")")//Draw x-axis coordinates
G.append ("G")
. Call (Y_axis)
. Append ("text")
. Text ("Price ($)")
. attr ("transform", "rotate (-90)")
. attr ("Text-anchor", "End")
. attr ("dy", "1em")//Draw y-axis coordinates and add text and flip the text position cheaply
STYLE.CSS:
#container {
Background: #ddd;
width:500px;
height:250px;
}
path{
Fill:none;
Stroke: #c03;
Stroke-width:2;
}
. Domain,.tick line{
Stroke: #999;
Stroke-width:1;
}
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
