D3 Javascript görselleştirmede JSON verilerini kullanma

Question

Javascript D3 görselleştirme araçlarıyla (http://mbostock.github.com/d3/) yapılan bazı grafikleri yürütmek için JSON verilerinin kullanımı üzerinde çalışıyorum. Ben setup benim WCF hizmetini ettik ve jQuery bu kod çalışıyor:

$('#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 da JSON verilerini kullanarak bir işlevi vardır, ama henüz başarı olmadı. Bu şuna benzer:

// 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); 

Hemen hemen tüm kod çalışıyor D3 indir, içinde 'çubuk grafik' örnek değil. Verileri manuel olarak bildirirsem (yukarıdaki tamsayılar dizisi başına) çalışır, ancak JSON komutuyla değil. Ayrıca döndürülen verileri basitleştirdim, böylece yalnızca tamsayılardan oluşuyordu. Nihayetinde, JSON verilerine 'id alanı', 'değer alanı' vb. Ile erişmek ve bunlara kodda başvurmak isterdim.

Sözdizimimin yanlış olup olmadığı konusunda herhangi bir fikri olan var mı? Grafiğe veri eklemek için fonksiyonun (veri) kullanılmasının gerekli olduğunu anlıyorum, ancak bu örnekte kod çalışır bu yüzden bu noktadan başlamayı tercih ederim.

Answer 1

D3 çerçevenin bütünlüğü için kendi json alma işlevine sahiptir, ancak bunu kullanmak zorunda değilsiniz. D3 grafiğinizi jQuery $.getJSON ile deneyebilirsiniz ve işe yarayacaktır. Benim geliştirmemizin çoğu jQuery kullanılarak yapıldığı için yaptığım şey bu.

Örneğinizle ilgili olarak, d3.json semantikleri, tam olarak $.getJSON ile aynıdır. Veriler alındıktan sonra fonksiyonun çağrıldığı asenkron çağrıdır. Şunun gibi bir şey deneyin:

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); 

    });