I have a .json with 3 columns where one of them is 'Year'. The column contains only years. No dates!.
When I am graphing it on the 'x' axis the years come out with a comma delimiter for thousands.
So in the .json the date is this format :"Year":1990 and on the 'x' axis it comes out like that 1,990
I have been trying to figure out how to parse the year but I have no luck so far. I have tried the following:
var parseDate = d3.time.format("%y").parse var x = d3.time.scale() .range([0, width]); //further down d3.json("waterData.json", function(error, json) { // Attach Data var data = json.data; // Select Data for X and Y var axis1 = 'Year'; var axis2 = 'Ratio' // Convert String into Numbers data.forEach(function(d) { ///axis1 = parseDate(axis1); d[axis1] = +d[axis1] d[axis2] = +d[axis2] }); x.domain(d3.extent(data, function(d) { return d[axis1]; })); y.domain(d3.extent(data, function(d) { return d[axis2]; })); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (height+10) + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -40) .text(axis1) svg.append("g") .attr("class", "y axis") .attr("transform", "translate("+ -10 + "," + 0 + ")") .call(yAxis) .append("text") .attr("class", "label") .attr("x", 10) .style("fill", "#666") .style("text-anchor", "start") .text(axis2)
Any suggestions of how to get rid of the comma delimiter. Or to figure out how to parse the date.
You should add .tickFormat(d3.format("d"))
to your xAxis:
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.format("d"));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With