在D3中使用JSON數據Javascript可視化

Question

我正在通過使用JSON數據來驅動一些使用JavaScript D3可視化工具（http://mbostock.github.com/d3/）製作的圖表。我設置我的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); 

    });