2017-04-21 7 views
0

TL; DR:AJAX、d3、およびPHPを使用してデータベースからデータを取得し、そこからグラフを作成する良い例があれば幸いです。d3.queueを使用してAJAX応答を待機する

AJAXとPHPを使用してデータベースから取得したデータに基づいて力のグラフを作成するためにd3を使用していますが、データをDOM要素にバインドするかD3を使用する方法がいくつかあります。キューはそれを行う最も論理的な方法だと思われますが、これらのビットをすべて一緒に使用する簡単な例を見つけるのには苦労しています。

だから私の働いAJAX要求は次のようになります。

$(document).ready(function() { 
     $('select[name="locations"]').change(function(){ 
      var location = $(this).val(); 
      $.ajax({ 
        type: 'POST', 
        url: 'dataselect.php', 
        data: { l_id: location }, 
        success: function (response) { 
       console.log(response); 
      },  
      }); 
     }); 
    }); 

私は、DOM要素にJSONを渡して試してみたが、ない運がそれを抽出していないし、一部の人々は、このアプローチを嫌うように見えます。

d3.json("test.php", function(error, graph) { 
    if (error) throw error;... Lots more d3 that I don't think is relevant. 

test.phpをしてdataselect.phpがdataselect除いて同一であるAJAX要求のための変数を持っており、それがあるとしてd3はそれを好きではない:

作品d3はこのようになります。

私の質問は、d3が実行する前にAJAXリクエストからのデータを「待つ」ための最もスムーズな方法は何ですか?

私は、関数の中にいくつかのものを入れて何らかの順序でキューに入れておく必要があると推測していますが、本当に一緒に結びつけるのは苦労しています。

最後に、申し訳ありませんが、私はこれがかなり些細でなければならないと感じていますが、私は多くの質問を読んでおり、これまでのところ解決策を実装していません。

EDIT:だからd3.requestルート以下、私はAJAXせずにデータを送信する方法を考え出した:

d3.selectAll("#onploc") 
.on('change', function() { 
    var location = eval(d3.select(this).property('value')); 
console.log(location);//gets value property of selected menu item. 


d3.json("dataselect.php?l_id="+location,function(error, data) { 
console.log(data);//sends location variable to php to get data back. 
}) 
}); 

答えて

1

これは、どちらかの道を行くことができる - あなたはあなたからD3の描画コードを呼び出すことができますいずれか成功コールバック、例えば

... 
success: function(response) { 
    var data = JSON.parse(response) // maybe, if you need to convert to JSON 
    d3RenderFunction(data); 
} 

か、d3.request使用してパラメータを渡すことができます。

d3.request('dataselect.php') 
    .mimeType("application/json") 
    .response(function(xhr) { return JSON.parse(xhr.responseText); }) 
    .post({ l_id: location }, function(error, graph) { ... }) 
+0

おかげで、私はD3要求で行く必要があるでしょう、私はキューが容易になるだろうと思ったが、私は間違った終わりを持っていたと思いますスティック... –

関連する問題