Uso de datos JSON en D3 Visualización de Javascript

Question

Estoy trabajando con el uso de datos JSON para controlar algunos gráficos creados con las herramientas de visualización javascript D3 (http://mbostock.github.com/d3/). He fijado mi servicio WCF, y este código en Jquery funciona bien:

$('#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 tiene una función para el uso de los datos JSON también, pero todavía no he tenido éxito. Se ve así:

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

Prácticamente todo el código es del ejemplo de gráfico de barras 'en la descarga D3, que trabaja muy bien. Si declaro los datos manualmente (por la matriz de enteros arriba) funciona, pero no con el comando JSON. También simplifiqué los datos devueltos, por lo que consistía solo en enteros. Sin embargo, en última instancia, me gustaría poder acceder a los datos de JSON con un 'campo de id', 'campo de valor', etc. y hacer referencia a estos en el código.

¿Alguien tiene alguna idea sobre si mi sintaxis es incorrecta? Me doy cuenta de que la función (datos) está destinada a ser utilizada para agregar datos al gráfico, pero el código en este ejemplo funciona, por lo que preferiría comenzar desde ese punto.

Answer 1

D3 tiene su propia función de obtención de json para completar el marco, pero no tiene que usarlo. Puede probar su tabla d3 con jQuery $.getJSON y debería funcionar. Esto es lo que hago, ya que la mayor parte de mi desarrollo se realiza usando jQuery.

En cuanto a su ejemplo, la semántica d3.json es exactamente la misma que la $.getJSON. Es una llamada asincrónica en la que se llama a la función después de recuperar los datos. Pruebe algo como esto:

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

    });