jQuery(document).ready( function () {
// SVG Size and Location
var width = 500,
height = 200,
margin = {
top : 30,
bottom : 30,
left : 50,
right : 50
};
// SVG DOM creation
var mySvg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
// root G creation
var rootG = mySvg.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
// Max Data
var xMax = 1000,
yMax = 20;
// Axis Size
// xHeight should be greater than margin.top so that X-Axis will appear
// yWidth should be greater thatn margin.right so that label of X-Axis will appear
var axisMargin = { xHeight : 80, yWidth : 80 };
// D3 Scale creation
// use real data value array as a parameter of domain()
// use pixel value array as a parameter of range()
// if the Origin point of chart is located in the bottom,
// the range array needs to be changed accordingly,
// because the browser's Origin point is located in the top.
var xScale = d3.scale.linear().domain([0, xMax]).range([0, width]),
yScale = d3.scale.linear().domain([0, yMax]).range([height, 0]);
// D3 X-Axis, Y-Axis creation
// note that typeof xAxis === "function" and typeof yAxis === "function",
// which means that svg.axis() returns function.
var xAxis = d3.svg.axis().scale(xScale).orient("bottom"),
yAxis = d3.svg.axis().scale(yScale).orient("left");
// X-Axis, Y-Axis DOM creation
var gXAxis = rootG.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis),
gYAxis = rootG.append("g")
.attr("class", "axis")
.call(yAxis);
});
<body></body>
/* font inherited from svg */
svg {
font: 12px sans-serif;
}
/* main line of axis */
.axis path {
fill: none;
stroke: darkgray;
font: 10px;
}
/* tick line of axis */
.axis line {
fill: none;
stroke: #3355ff;
}
External resources loaded into this fiddle: