Sử dụng dữ liệu JSON trong hiển thị Javascript D3

Question

Tôi đang làm việc thông qua việc sử dụng dữ liệu JSON để điều khiển một số biểu đồ được thực hiện bằng công cụ trực quan hóa D3 javascript (http://mbostock.github.com/d3/). Tôi đã thiết lập dịch vụ WCF của tôi và mã này trong Jquery hoạt động tốt:

$('#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 cũng có chức năng sử dụng dữ liệu JSON nhưng tôi chưa thành công. Nó trông giống như thế này:

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

Khá nhiều tất cả các mã là từ 'biểu đồ thanh' ví dụ trong việc tải xuống D3, trong đó hoạt động tốt. Nếu tôi khai báo dữ liệu theo cách thủ công (theo mảng các số nguyên ở trên) nó hoạt động, nhưng không phải với lệnh JSON. Tôi cũng đơn giản hóa dữ liệu được trả về để nó chỉ bao gồm các số nguyên. Cuối cùng, tôi muốn có thể truy cập dữ liệu JSON với 'trường id', 'trường giá trị' và tham chiếu các mã này trong mã.

Bất kỳ ai có bất kỳ ý tưởng nào về việc cú pháp của tôi có đúng không? Tôi nhận ra hàm (dữ liệu) được sử dụng để thêm dữ liệu vào biểu đồ, nhưng mã trong ví dụ này hoạt động nên tôi muốn bắt đầu từ điểm đó.

Answer 1

D3 có chức năng nhận cú pháp riêng để hoàn thành khuôn khổ nhưng bạn không phải sử dụng nó. Bạn có thể thử biểu đồ d3 của bạn với jQuery $.getJSON và nó sẽ hoạt động. Đây là những gì tôi làm vì hầu hết sự phát triển của tôi được thực hiện bằng cách sử dụng jQuery.

Ví dụ: ngữ nghĩa d3.json giống hệt như $.getJSON. Đó là cuộc gọi không đồng bộ trong đó hàm được gọi sau khi dữ liệu được lấy ra. Hãy thử một cái gì đó như thế này:

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

    });