Использование данных JSON в визуализации Javascript D3

Я работаю над использованием данных 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. Я также упростил возвращаемые данные, чтобы они состояли только из целых чисел. Однако в конечном итоге я бы хотел иметь доступ к данным JSON с помощью «поля идентификатора», «поля значения» и т. Д. И ссылаться на них в коде.

У кого-нибудь есть идеи относительно того, неверен ли мой синтаксис? Я понимаю, что функция (данные) предназначена для добавления данных в диаграмму, но код в этом примере работает, поэтому я бы предпочел начать с этой точки.

8
задан Łukasz 11 June 2016 в 20:30
поделиться