首页 > 解决方案 > d3.js json 通过 ajax 响应使用 d3.json()

问题描述

我对 d3.js 很陌生,我想学习如何使用它。我正在尝试实现这个例子:https ://www.jasondavies.com/coffee-wheel/ 。此示例使用来自名为“wheel.json”的 json 脚本的一组数据。现在,我想知道是否可以使用 ajax 请求的 json 数据(它请求一个 php 文件),这样我就可以直接从数据库中查看数据,并且每次数据库值更改时图形数据都会更新。通过对 php 脚本执行 $.ajax jquery 调用方法的特定案例,它不起作用。

PHP代码:

switch ($strMetodo) {

case('listBananas'): //controlling what I need to list

    $arrayBananasTO = BananaController::listBananas(
            $QueryParameters); //fetch all Bananas from DAO and store them in an array

    $row = CBananasCommon::iterateListBananas($arrayBananasTO); //fetch the array, and 
store each value to a row in a datatable

    $output['data'] = $row; //store fetched array, and naming json's array container as 'data'

    echo json_encode(utf8ize($output)); //echoing json


    break;

case('listApples'):

    $codBananaObtenido = $_POST['idBanana'];

    $arrayApplesTO = AppleController::listApples(
            $QueryParameters);

    $row = CApplesCommon::iterateListApples(
            $arrayApplesTO);

    $output['data'] = $row;
    echo json_encode(utf8ize($output));

    break;

}

JS代码:

d3.json($.ajax({
    url: "..url/to/script/example.php",
    "type": "POST",
    "data": {method: "listBananas"},
    "success": function (output) {
         return output;
    }}), function (r, i) {
    function l(n) {


    .......

标签: phpjsonajaxd3.js

解决方案


原来我只需要用我的 php 脚本的 url 替换 d3.json("wheel.json",... 行并回显 json 响应。这样,我只需要编写 d3.json(".. /url/to/script/example.php,...; 而且我必须从 switch/case 中执行 json 的回显,否则它将不起作用。还有一件事:密切关注 json 的回显,如果它是错误的、损坏的、太多的 Array-ish,它不会被 d3 识别。为此目的使用 json 美化器。谢谢(?)


推荐阅读