D3でJSONデータを使用するJavascriptの視覚化

Question

JavaScriptのD3ビジュアライゼーションツール（http://mbostock.github.com/d3/）で作成したグラフを駆動するためにJSONデータを使用しています。私はセットアップ私のWCFサービスをした、とjQueryでこのコードは正常に動作します：

$('#getDataItems').click(function() { 

      var $DataList = $('#DataList'); 
      $DataList.empty().appendLi('Loading...'); 

      // Get the JsonP data 
      $.getJSON('http://localhost:65025/CustomersService.svc/GetMyDataItems?callback=?', null, function (somedata) { 
       alert('Received ' + somedata.length + ' Items'); 

       $DataList.empty(); 
       $.each(somedata, function() { 
        $DataList.appendLi(this.ID + " - " + this.Value); 
       }); // end each dataitem function 
      }); // end success function 
     }); // end #getDataItems.click 

D3はまた、JSONデータを使用するための機能を持っているが、私はまだ成功していませんでした。それは次のようになります。

// this works 
//var data = [4, 8, 15, 16, 23, 42]; 

// this doesn't 
    var data = function() { 
      d3.json('http://localhost:65025/CustomersService.svc/GetMyDataItems?callback=?', 
    function (data) } }) 
    } 

//.. rest of the example is known working code so its here only for reference 

// create the chart class as an append to the body element. 
var chart = d3.select("body") 
    .append("svg:svg") 
    .attr("class", "chart") 
    .attr("width", 420) 
    .attr("height", 20 * data.length); 

// Set the width relative to max data value 
var x = d3.scale.linear() 
.domain([0, d3.max(data)]) 
.range([0, 420]); 

var y = d3.scale.ordinal() 
.domain(data) 
.rangeBands([0, 120]); 

chart.selectAll("rect") 
.data(data) 
.enter().append("svg:rect") 
.attr("y", y) 
.attr("width", x) 
.attr("height", y.rangeBand()); 

chart.selectAll("text") 
.data(data) 
.enter().append("svg:text") 
.attr("x", x) 
.attr("y", function (d) { return y(d) + y.rangeBand()/2; }) 
.attr("dx", -3) // padding-right 
.attr("dy", ".35em") // vertical-align: middle 
.attr("text-anchor", "end") // text-align: right 
.text(String); 

ほとんどすべてのコードが正常に動作D3のダウンロード、の「棒グラフ」の例からです。データを手動で（上記の整数の配列ごとに）宣言すると、JSONコマンドでは機能しません。返されたデータを単純化し、整数だけで構成しました。結局のところ、私は 'idフィールド'、 '値フィールド'などでJSONデータにアクセスし、これらをコード内で参照できるようにしたいと考えています。

誰かが私の構文が間違っているかどうかについてのアイデアはありますか？私は関数（データ）がグラフにデータを追加するために使われることを理解していますが、この例のコードは機能しますので、その点から始めたいと思います。

Answer 1

D3には、フレームワークの完全性のための独自のjson関数がありますが、それを使用する必要はありません。あなたはjQuery $.getJSONであなたのd3チャートを試すことができ、それはうまくいくはずです。これは私の開発の大部分がjQueryを使って行われて以来、私がやっていることです。

例として、d3.jsonのセマンティクスは、$.getJSONとまったく同じです。これは、データが取得された後に関数が呼び出される非同期呼び出しです。次のような方法を試してみてください：

d3.json(
    'http://localhost:65025/CustomersService.svc/GetMyDataItems?callback=?', 
    function (jsondata) { 

    // create the chart here with 
    // the returned data 

    console.log(jsondata); 

    var data = jsondata.map(function(d) { return d.Value; }); 
    console.log(data); 

    });