Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3 remove comma delimiters for thousands

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.

like image 615
Georgi Avatar asked May 14 '13 18:05

Georgi


1 Answers

You should add .tickFormat(d3.format("d")) to your xAxis:

var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.format("d")); 
like image 148
muyueh Avatar answered Oct 14 '22 11:10

muyueh