5

D3.js で data().enter().append() を使用した後、データセット内の個々の列/値は、d.valuename. しかし、線形スケールの CSV 列で最大値を見つけたいです。スケールの前にデータ呼び出しがないため、最大値を見つけるための正しい列を指定する方法が本当にわかりません。

これは私の失敗した試みです。何を代用d.column1する？

d3.csv("file.csv", function (data) {

var x = d3.scale.linear()
    .domain([0, d3.max(d.column1)])
    .range([0, 960]);

編集：

わかりました、同様の例を見て、もう少し理解しました。私のコードが今動かない理由がわかりません。

 d3.csv("file.csv", function (data) {

 data.forEach(function(d) {
    d.column1 = +d.column1;
 });

 var max = d3.max(data, function(d) { return d.column1; });

 var x = d3.scale.linear()
     .domain([0, max])
     .range([0, 960]);

編集＃2：

問題がデータ自体に由来する場合は、スニペットを次に示します。すべての引用符を削除しようとしましたが、一番上の行以外のすべての引用符を保持しようとしましたが、何も機能しません。

"product", "price"
"bread",20
"meat",100
"meat, sausage",200

編集＃3：

わかりました、約束します、最後の編集です。しかし、完全に明確にするために。棒グラフの棒の幅を決定するために x スケールを使用してい.attr("width", x)ます。スケールは NaN を返します。

4

2 に答える 2

7

コードが機能する理由を説明するには:

data.forEach(function(d) {
  d.column1 = +d.column1;
});

上記のステートメントは、すべての column1 値を整数に変換します (d.column1 の前の + 記号は、型を数値に強制します)。

値がすべて数値になると、d3 はそれらを文字列ではなく数値として比較できるようになります。このように、10 は 9 よりも大きくなります。文字列の場合、"9" は "10" よりも大きくなります。

var max = d3.max(data, function(d) { return d.column1; });

上記の行は、単にデータ配列の最大値を取ります。データ配列はオブジェクトで構成されているため、d3 はあるオブジェクトを別のオブジェクトと比較する方法を知る方法がありません。2 番目のパラメーターは、d3 が各オブジェクトを比較できるように、d3 に各オブジェクトに値を与える関数です。あなたの場合、d3にcolumn1を使用して最大値を決定するように指示しています。これはコンパレータ機能に似ています。

于 2013-02-14T02:27:33.047 に答える
1

私は問題が何であるかを理解しました。これを一緒に理解できなかったのも不思議ではありません。上記のコードはすべて問題ありません。棒の幅を決定するために x スケールを呼び出したときに、データのどの列をスケールに入力するかを指定しなかっただけです。私が持っていた

.attr("width", x)

しかし今、私はその行を次のように変更しました:

.attr("width", function(d) { return x(d.column1); })

ご協力いただきありがとうございます。

于 2013-02-14T14:42:08.543 に答える