私は、d3jsを使って棒グラフプロジェクトで行き詰まってしまった。私は、tsvファイルのデータを使用して、各国のドローン数の合計を求めようとしています。スプレッドシートの複数のエントリは同じ国のものなので、これらの値を追加したいと思います。D3jsで同じコードで異なる結果が得られるのはなぜですか?
コードを.attr('y')
の下に1回実行したときにうまくいきました。私はスプレッドシートを二重にチェックし、合計を合計しました。しかし、私が.attr('height')
で同じ条件を実行したとき、私は棒グラフを台無しにしていました。ここで私はとのトラブルを抱えているコードです:
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.Country); })
.attr("y", function(d,i) {
try{
if (data[i].Country == data[i-1].Country){
data[i].Registration += data[i-1].Registration;
}
else{
console.log(data[i-1].Country + ' ' + data[i-1].Registration);
return data[i-1].Registration;//y(data[i-1].Registration);
}
}
catch(err){
console.log('did not work')
}
})
.attr("width",20)
.attr("height", function(d,i) {
try{ //SAME CODE DIFFERENT REGISTRATION VALUES
if (data[i].Country == data[i-1].Country){
data[i].Registration += data[i-1].Registration;
}
else{ console.log(data[i-1].Country + ' ' + data[i-1].Registration); return (height - data[i-1].Registration);}
}
catch(err){
console.log('did not work')
}
});
})
TSVファイルには、次のようになります。
Country Registration
land Islands 1
American Samoa 1
American Samoa 1
American Samoa 1
American Samoa 6
American Samoa 1
American Samoa 1
American Samoa 1
Antigua and Barbuda 1
Argentina 1
Australia 1
Australia 2
Australia 1
Australia 1
Brazil 1
Brazil 1
Brazil 1
私はjsのフィドルにentire codeを入れています。私は解決策を強調して一日以上過ごしたので、本当に助けに感謝します。
を作業
はあなたがachiveしたい正確に何を伝えることができます。 –
JSFiddleが機能しません。それはD3を欠いており、それを修正した後でさえ、他のエラーがあります。 – altocumulus
異なる結果が表示される理由は、 'data [i] .Registration + = data [i-1] .Registration;'を実行すると実際にデータを変更しているからです。 [加算代入演算子](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment) '+ ='に注目してください。 'height'へのコールバックで計算を行うとき、あなたのデータは' y'への前のコールバックによって既に変更されています。可能な解決法はCyrilの[answer](http://stackoverflow.com/a/41197222/4235784)によって提供されています。 – altocumulus