D3/JSマッピングJSONデータコールバック

Question

は私のようなd3.csv()コールバックマッピングを持つ多くの例を見てきました。その理由は、私は属性d：期待数、 "MaNn"、 "NaNz"というエラーがあることです。私が間違っていない場合、このエラーは、しばしば文字列として解析されるデータに関連付けられます。 JSONは数値/浮動小数点数になりますが、D3がデータを文字列として解析している場合は、数値としてマップしたいので、コンソールログエラーから文字列の犯人として解析することはできません。だから、私が試したことは単項+を使用して、おおよそ上記のCSVの場合と同じであった。

var json = raw_json.map(function(d) { return 
    xs: +d.xs, 
    ys: +d.ys, 
    id: +d.id 
}); 

この時点で、エラーがまだそこにいました。しかし、JSONデータ.map()が適切な構文であると完全に確信していないため、文字列解析エラーの帰無仮説を完全に拒否したかどうかはわかりません。私は現時点ではまあまあです。

質問：私の.map()は完全に間違っていますか？予想される番号のエラーをトラブルシューティングするために何かできることはありますか？

JSONファイルにはさまざまなデータ構造があります。

Answer 1

あなた.map()一致していない、あなたのJSONデータ：ここに私のconsole.log(raw_json)は、コンソールログにどのように見えるかのスクリーンショットです。あなたのJSONは、3つの配列idため、xsとysを含むつのオブジェクトを有するつのアレイから成ります。

var obj = raw_json[0]; 
obj.id = obj.id.map(id => +id); 
obj.xs = obj.xs.map(x => +x); 
obj.ys = obj.ys.map(y => +y); 

か、数字のみへの変換中にあなたが新しいアレイを作成する必要はありませんので、好ましくは、あなたも使ってその場で変換を行うことができます：あなたは3つの別々のループを必要とする数値にすべてのこれらの文字列を変換するにはの代わりに.forEach()

const toNum = (d, i, a) => { a[i] = +d }; // Conversion function 

var obj = raw_json[0]; 
obj.id.forEach(toNum); 
obj.xs.forEach(toNum); 
obj.ys.forEach(toNum); 

は、次の作業の例を見てください：

var raw = ` 
 
    [{ 
 
    "id": ["1", "2", "3"], 
 
    "xs": ["11", "12", "13"], 
 
    "ys": ["21", "22", "23"] 
 
    }] 
 
`; 
 
var data = JSON.parse(raw); 
 

 
const toNum = (d, i, a) => { a[i] = +d }; // Conversion function 
 

 
var obj = data[0]; 
 
obj.id.forEach(toNum); 
 
obj.xs.forEach(toNum); 
 
obj.ys.forEach(toNum); 
 

 
console.dir(data);