First, you need to create a SVG with the appropriate width and height. To create an SVG element, make a
var and then
svg element with appropriate dimensions.
var svg = d3.select("body") .append("svg") .attr("width", 300) .attr("height", 300);
D3 provides a wide selection of scale that includes
scalePoint, etc. Click here to see the different types of scales provided by D3. For this example, we will use
We need to define the
var xscale = d3.scaleLinear() .domain([1, 10]) .range([0, 100]);
Finally, you need to set the position of the axis and specify the type. Below are the four types of axis:
||Creates horizontal axis at top|
||Creates horizontal axis at bottom|
||Creates vertical axis at right|
||Creates vertical axis at left|
After doing so, append the axis to your
svg variable and its done!
var xaxis = d3.axisBottom() .scale(xscale); svg.append("g") .attr("transform", "translate(50,120)") .call(xaxis);
The steps described above are combined below in an HTML code. A y-axis has been added to demonstrate how to make a complete 2-D axis. You can make the y-axis by following the steps above.
View all Courses