2016-10-10 5 views
0

を使用してD3プラス可視化に使用されるJSONファイルをロードしようとしています、私はD3plusを使って、箱ひげ図を作成しようとアップロード/ jQueryを使って変数にJSONデータを格納しています:私はjQueryの

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <script src="./JS/d3.min.js"></script> 
    <script src="./JS/d3plus.min.js"></script> 
    <script src="./JS/jQuery.min.js"></script> 
</head> 
<body> 

<div id="viz"></div> 

<script> 
    var data; 

    $.getJSON("./Data/boxplot.json", function(json) { 
     data = json; 
    }); 
    var visualization = d3plus.viz() 
    .container("#viz") 
    .data(data) 
    .type("box") 
    .id("name") 
    .x("building") 
    .y("total") 
    .time(false) 
    .height(800) 
    .ui([{ 
     "label": "Visualization Type", 
     "method": "type", 
     "value": ["scatter","box"] 
     }]) 
    .draw() 
</script> 

</body> 
</html> 

jsonデータをファイルにコピーアンドペーストすれば、それは動作します。しかし、 "Data"フォルダに格納された外部jsonファイルからデータを取得しようとすると、動作しません。私はエラーが発生する: "ボックスプロットの視覚化は、"データ "メソッドを設定する必要があります。ここで

は、私のファイル構造である:ここで

enter image description here

は私のJSONファイルです:

[{"building":"MMB","name":"Shane","total":1},{"building":"MMB","name":"Geneviève, Bérubé","total":1},{"building":"MMB","name":"Dana","total":10},{"building":"MMB","name":"karine","total":2},{"building":"MMB","name":"Anthony","total":1},{"building":"MMB","name":"Erwin","total":6},{"building":"MMB","name":"Jake","total":2}, 
{"building":"MMB","name":"Karen","total":1},{"building":"MMB","name":"sabrina","total":2},{"building":"MMB","name":"Jeannine","total":4}] 

はお時間をありがとうございました!

EDIT:そのような

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <script src="./JS/d3.min.js"></script> 
    <script src="./JS/d3plus.min.js"></script> 
    <script src="./JS/jQuery.min.js"></script> 
</head> 
<body> 

<div id="viz"></div> 

<script> 

$.getJSON("./Data/boxplot.json", function(json) { 
    data = json, 
    success = function(data){ 
    .container("#viz") 
    .data(data) 
     .type("box") 
     .id("name") 
     .x("building") 
     .y("total") 
     .time(false) 
     .height(800) 
     .ui([{ 
      "label": "Visualization Type", 
      "method": "type", 
      "value": ["scatter","box"] 
     }]) 
     .draw() 
    } 
}) 
</script> 

</body> 
</html> 
+3

可能な重複[どのように応答を返さない:

var visualization = d3plus.viz() .container("#viz") .data("./Data/boxplot.json") .type("box") .id("name") .x("building") .y("total") .time(false) .height(800) .ui([{ "label": "Visualization Type", "method": "type", "value": ["scatter","box"] }]) .draw(); 

と参照用

、ここではデータメソッドに設定できるカスタムプロパティのすべてです:単にデータメソッドにパスを渡します非同期呼び出しから?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) –

+0

$ .getJSONは非同期です - したがって、データはありませんgetJSON呼び出しが実行された後にコードが作成されるまで –

答えて

1
$.getJSON("./Data/boxplot.json", function(json) { 
    data = json, 
    success = function(data){ 
    d3plus.viz() 
     .container("#viz") 
     .data(data) 
     .type("box") 
     .id("name") 
     .x("building") 
     .y("total") 
     .time(false) 
     .height(800) 
     .ui([{ 
      "label": "Visualization Type", 
      "method": "type", 
      "value": ["scatter","box"] 
     }]) 
     .draw() 
    } 
}) 

何かが動作するはずです。 getJSON呼び出し後の「成功」の値は、非同期応答が返された後に呼び出される関数です(したがって、関数に渡されるパラメータdata)。 D3のものが機能していることを確認していませんでしたが、それはあなたのAJAXコールの問題を解決するはずです。