在 D3 Javascript 可视化中使用 JSON 数据

Posted 2023-03-03

【中文标题】在 D3 Javascript 可视化中使用 JSON 数据

【英文标题】：Using JSON data in D3 Javascript visualisation

【发布时间】：2011-10-23 21:28:55

【问题描述】：

我正在通过使用 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 数据并在代码中引用它们。

有人对我的语法是否不正确有任何想法吗？我意识到这个函数（数据）是用来向图表添加数据的，但是这个例子中的代码是有效的，所以我更愿意从那一点开始。

【参考方案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);

  );

【讨论】：

嗨！感谢那。如果我要使用 jquery 版本（在第一个 sn-p 中），以 'somedata' 变量结束 - 我如何将值放入类似于 'var data = [1, 2, 3] 的数组中？ JSON 可能包含每个“记录”的两个字段 - 名称和值。那么如何将 JSON 值转换为与“数据”相同的格式来完成绘图呢？对不起，我希望这是有道理的，我正在努力解释它！ :)

如果您的 Web 服务返回类似 [1, 2, 3] 的内容，那么您应该在 data 变量中包含该信息。使用 firebug 和 console.log(data) 准确查看您返回的内容。

从您的 jQUery 示例中，数据被检索为 ID 和 Value 对。我已经更新了答案以反映如何从中获取数据。

你添加的最后一行是我知道一定需要的链接。此外，console.log 真的很有帮助！非常感谢您的帮助伙伴。