Hi,
I’m slowly working my way thru the Visualize Data with a Bar Chart project.
I can’t figure out how to get the bars to spread across the x-axis properly. All bars are currently stacked on each other. The x-axis represents dates.
Here is my project: https://codepen.io/tpmc123/pen/OoZEgJ/
Here is my current code for creating my xScale:
let xMin = d3.min(dataArray, e => Date.parse(e[0]));
console.log('xMin = ' + xMin);
let xMax = d3.max(dataArray, e => Date.parse(e[0]));
console.log('xMax = ' + xMax);
const xScale = d3.scaleTime()
.domain([xMin, xMax])
.range(0, w);
And here’s my current code for displaying the bars:
svg.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
//.attr("x", (d,i) => xScale(Date.parse(d[0])))
.attr("x", function(d, i) {
//console.log('----')
//console.log(Date.parse(d[0]))
return Date.parse(d[0])
})
.attr("y", (d, i) => yScale(h - d[1]))
.attr("width", w / dataArray.length)
.attr("height", (d,i) => d[1])
.attr("fill", "red")
I know I’ll have other issues once this is resolved, and I’m only focused on this issue for now. Can you help me get the bars to spread across the x-axis properly? I’m stuck!
THX!