2013-05-14 19 views
14

私は3つの列を持つ.jsonを持っています。そのうちの1つが「Year」です。列には年だけが含まれます。日付なし!D3カンマ区切り文字を削除します。

私は 'x'軸上にグラフを描いていますが、何千ものカンマ区切りで年が表示されます。

だから、.jsonに日付がこの形式は、次のとおりです。「年」:1990 と「X」に、それは私が年に解析する方法を把握しようとしているその1990

のように出てくる軸私は今まで運がありません。私は以下を試しました:

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) 

カンマ区切り記号を取り除く方法の提案。または、日付を解析する方法を理解する。

+0

あなたが実際にあなたの 'parseDate'機能を使用していないように見えます。 'd [axis1] = parseDate(d [axis1])'を試してください。 –

+0

私はそれを使用しています、または少なくとも私は5行のボトムトップを試しています。提案していただきありがとうございますが、これは動作しません。 – Georgi

+0

あなたは間違った場所で使用しています。これは完全なコードですか? –

答えて

25

あなたはx軸に.tickFormat(d3.format("d"))を追加する必要があります

var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.format("d")); 
+0

ありがとう、これは完全に動作します。 – bfncs

+0

これは10進精度を失うことに注意してください –

関連する問題