Tell us what’s happening:
I am working on making the bar graph in D3, and my x-axis is not displaying properly. (The y-axis looks fine.) I cannot get any tick marks to appear. Can anyone help me figure out why this is happening?
Thanks in advance.
Your code so far
var data = json.data
const w = 1000; //width
const h = 600; //height
const padding = 100 //padding
//Scale for x-axis (years)
const xScale = d3.scaleLinear()
.domain([d3.min(data, d => d[0]), d3.max(data, d => d[0])])
.range([0, (w - (padding))]);
const xAxis = d3.axisBottom(xScale)
//SVG canvas
const svg=d3.select("a")
.append("svg")
.attr("width", w)
.attr("height", h)
//bars
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 3)
.attr("height", (d, i) => {return d[1]/50})
.attr("x", (d, i) => {return d[0], (i * 3) + padding})
.attr("y", (d, i) => {return h - 2*padding+5 - d[1]/50})
.attr("class", "bar")
.append("title")
.text(d => d[0] + " $" + d[1] + " Billion")
//move the X-axis
svg.append("g")
.attr("transform", "translate(" + (padding) + ", " + (h-(2*padding)+5) + ")")
.call(xAxis)
.attr("id", "x-axis");