Example of using axis for a Cartesian coordinate system.
xxxxxxxxxx<html> <head> <!-- from https://alignedleft.com/tutorials/d3/axes --> <meta charset='utf-8'> <title>D3.js Axis Example (Cartesian coordinate system)</title> <style> .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <script> var data = [ [0, 0, 25], [0, 0, 50] ]; // See https://bl.ocks.org/mbostock/3019563 for margins (or padding) var margin = { top: 30, right: 30, bottom: 30, left: 30 }; width = 500 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // create the svg container 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 + ")"); // set up the x scale var xScale = d3.scale.linear() .domain([-50, 50]) .range([0, width]); // actual length of axis // set up the y scale var yScale = d3.scale.linear() .domain([-50, 50]) .range([height, 0]); // actual length of axis // set up the r scale for the circles // i think both linear and sqrt scales give me // the same results, but with different ranges, // not sure which is correct though var rScale = d3.scale.linear() .domain([0, 100]) .range([0, height]); //var rScale = d3.scale.sqrt() //.domain([0, 100]) //.range([0, height/2]); // append a circle svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", function(d) { return rScale(d[2]); }) .style("stroke", "black") .style("stroke-width", 1) .style("fill", "none"); // define the x axis var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") // location of lables (default is bottom) .innerTickSize([6]) // This is not working... .outerTickSize([6]); // This is not working... // define the y axis var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .innerTickSize([6]) // This is not working... .outerTickSize([6]); // This is not working... // call the xAxis function to generate the x axis svg.append("g") .attr("class", "axis") // assign an axis class .attr("transform", "translate(0, " + (height / 2) + ")") .call(xAxis); // call the yAxis function to generate the x axis svg.append("g") .attr("class", "axis") // assign an axis class .attr("transform", "translate(" + width / 2 + ", 0)") .call(yAxis); </script> </body></html> https://d3js.org/d3.v3.min.js