0
私はcsvfileの値を使用してd3.jsで折れ線グラフを作成しようとしています。d3折れ線グラフと日付の値
私はd3を使用してグラフを作成する方法についていくつかの例を追ってきました。ただし、この折れ線グラフの結果は正確ではありません。
これは、私が働いているデータの一例である：
dates,count
17-dic-12,1
18-abr-13,1
11-oct-13,1
12-dic-13,1
08-jul-14,4
30-jul-14,4
01-ago-14,1
22-oct-14,3
30-oct-14,1
24-nov-14,1
02-dic-14,1
24-dic-14,1
14-ene-15,4
15-ene-15,1
22-ene-15,2
12-feb-15,1
17-abr-15,1
24-jun-15,1
15-jul-15,2
25-ago-15,1
28-ago-15,1
31-ago-15,1
01-sep-15,1
17-sep-15,1
24-dic-15,1
これは私が使用するコードです：
var m = [25, 50, 25, 50],
w = 700 - m[1] - m[3],
h = 400 - m[0] - m[2];
var formatDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale().range([0, w]);
var y = d3.scale.linear().range([h, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom').ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left').ticks(5);
var valueline = d3.svg.line()
.x(function(d) { return x(d.dates); })
.y(function(d) { return y(d.count); });
var svg = d3.select('#graph')
.classed("svg-container", true)
.append('svg')
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 850 1000")
.classed("svg-content-responsive", true)
.append('g')
.attr('transform', 'translate(' + m[3] + ',' + m[0] + ')');
d3.csv('datesdata.csv', function(error, dataset) {
dataset.forEach(function(d) {
d.dates = formatDate(d.dates);
d.count = +d.count;
});
x.domain(d3.extent(dataset, function(d) { return d.dates; }));
y.domain([0, d3.max(dataset, function(d) { return d.count; })]);
svg.append('path')
.attr('class', 'line')
.attr('d', valueline(dataset));
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + h + ")")
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
});
私はこのコードの変更を改善しようとしましたformatDate変数ですが、結果は同じです。
このグラフを改善するオプションはありますか？
'は、FormatDate（d.dates）の'はconsole.log（） ''結果。 d3がそれらを知らないので、英語ではない月の名前（ 'dic'、' abr'、 'ago'）にはおそらく空白になるでしょう。あなたの月の名前をCSVまたはハッシュを使ったjavascriptの名前に変更する必要があります。あるいは、これは複雑に見えます。スペイン語の月の略語を定義するロケールオブジェクトをd3に与えることができます。その最後の方法を理解するには、d3ソースに潜入する必要があります。 – meetamit
はい、確かに日付解析の問題です。日付文字列をISO形式に変換するだけで、おそらく動作します。 – reptilicus
まさに！ @ meetamitが言ったように、私は日付を英語の形式に変更しました。今それは動作します。ありがとう – estebanpdl