在JavaScript中使用JSON数据JavaScript可视化 [英] Using JSON data in D3 Javascript visualisation

问题描述

我正在使用JSON数据来驱动使用javascript D3可视化工具制作的一些图表（http://mbostock.github.com/d3/）。我设置了我的WCF服务，这个代码在Jquery工作正常：

I'm working through the use of JSON data to drive some charts made with the javascript D3 visualisation tools (http://mbostock.github.com/d3/). I've setup my WCF service, and this code in Jquery works fine:

$('#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数据的功能，但已经成功。它看起来像这样：

D3 has a function for using JSON data also, but I haven't yet had success. It looks like this:

// 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数据，并在代码中引用这些。

Pretty much all the code is from the 'bar chart' example in the D3 download, which works fine. If I declare the data manually (per the array of integers above) it works, but not with the JSON command. I also simplified the data returned so it consisted only of integers. Ultimately though, I'd want to be able to access JSON data with an 'id field', 'value field' etc and reference these in the code.

关于我的语法是否不正确的任何想法？我意识到函数（数据）是用来添加数据到图表，但在这个例子中的代码工作，所以我更喜欢从那一点开始。

Anyone have any ideas on whether my syntax is incorrect? I realise the function (data) is meant to be used to add data to the chart, but the code in this example works so I'd prefer to start from that point.

推荐答案

D3有自己的json获取函数的框架的完整性，但你不必使用它。你可以尝试你的d3图表与jQuery $。getJSON ，它应该工作。这是我做的，因为我的大部分开发是使用jQuery。

D3 has its own json getting function for completeness of the framework but you don't have to use it. You could try your d3 chart with the jQuery $.getJSON and it should work. This is what I do since most of my development is done using jQuery.

对于你的例子， d3.json 语义与 $。getJSON 完全相同。它是异步调用，其中在检索数据之后调用函数。尝试这样：

As for your example, the d3.json semantics is exactly the same as the $.getJSON. It is asynchronous call in which the function is called after the data is retrieved. Try something like this:

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

  });

这篇关于在JavaScript中使用JSON数据JavaScript可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！