D3删除数千的逗号分隔符 [英] D3 remove comma delimiters for thousands

问题描述

我有一个.json有3列，其中一个是年。该列仅包含年数。没有日期！

当我在'x'轴上绘制图形时，年份就会出现一个逗号分隔符，数以千计。

所以在.json中的日期是这样的格式：Year：1990
，在'x'轴上出现像1,990

我一直在想办法解析这一年，但我没有运气。我试过以下：

  var parseDate = d3.time.format（％y）。parse 
 
 var x = d3.time.scale（）
 .range（[0，width]）; 
 
 //进一步向下
 
 d3.json（waterData.json，function（error，json）{
 
 //附加数据
 var data = json.data; 
 
 //为X和Y选择数据
 var axis1 ='Year'; 
 var axis2 ='Ratio'
 
 //将字符串转换为数字
 data.forEach（function（d）{
 
 /// axis1 = parseDate（axis1）; 
 
d [axis1] = + d [axis1] 
d [axis2] = + d [axis2] 
}）; 
 
 x.domain（d3.extent ）{return d [axis1];}））; 
 
 $。 b $ b svg.append（g）
 .attr（class，x axis）
 .attr（transform，translate +）
 .call（xAxis）
 .append（text）
 .attr（class，label）
 .attr ，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）
  

b $ b

如何摆脱逗号分隔符的任何建议。

解决方案

您应该添加 .tickFormat（d3.format （d））到您的xAxis：

  var xAxis = d3.svg.axis ）.scale（x）.orient（bottom）。tickFormat（d3.format（d））; 
  

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"));

这篇关于D3删除数千的逗号分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！