米国の州ごとの統計のエリアチャートを作成しようとしています。私は各状態について単一の数値統計を持っています。私のデータリストの要素は、以下のようになります。D3カテゴリカルチャート - スケール問題
{'state':'CA','count':4000}
現在、私の面グラフはthisのように見えます。タスクは主に完了していますが、最後のカテゴリ(この場合はUTAH)がどのように満たされていないかに気づくことがあります。私はこれを回避する方法についてはあまりよく分かりません。 close_up
私はscaleBand軸を使用しています。これは適切だと感じました。おそらくそれは正しいアプローチではないでしょう。グラフの後ろにあるJSは次のとおりです。
var svg_area = d3.select("#area")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom),
g_area = svg_area.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand().range([0, width]),
y = d3.scaleLinear().range([height, 0]);
var area = d3.area()
.x(function(d) { return x(d.state); })
.y0(height)
.y1(function(d) { return y(d.count); });
d3.csv('data/states.csv', function(data) {
data.forEach(function(d) {
d.count = +d.count;
});
data.sort(function(a, b){
return b.count-a.count;
});
data = data.slice(0,30);
x.domain(data.map(function(d) { return d.state; }));
y.domain([0, d3.max(data, function(d) { return d.count; })]);
g_area.append('path')
.datum(data)
.attr('fill', solar[1])
.attr("class", "area")
.attr('d', area);
g_area.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g_area.append("g")
.attr("class", "y-axis")
.attr("transform", "translate(0," + 0 + ")")
.call(d3.axisLeft(y));
});
私はこれをどのように修正することができますか?フィードバックありがとう!
あなたもあなたのデータを共有できますか?ユタのデータは0かもしれません。 – Cyril
@Cyrilすべてのステートに0以外のカウントがあります。ユタ州は1866年です。 – Sam