【问题标题】:PHP-generated json variables not showing in D3.jsPHP 生成的 json 变量未显示在 D3.js 中
【发布时间】:2012-12-04 18:47:25
【问题描述】:

我已经尝试了此代码的一些变体,但我在控制台中没有错误消息而停滞不前。现在,它应该非常简单,主要来自 Mike Dewar 的 D3.js 入门。我做了一些更改,我认为这些更改让它崩溃了(对不起,迈克,我确定这是我的错)。

首先,我有一个 php 文件,当我打开它时它可以工作: {"name":1,"status":2,"url":3,"time":4,"day":5}

与之相呼应的代码称为“jsonphp.php”:

<?php
    $arr = array('name' => 1, 'status' => 2, 'url' => 3, 'time' => 4, 'day' => 5);
    echo json_encode($arr);
?> 

然后我只想引用它并(作为测试)在表格中显示它。这是一个名为“d3test.htm”的文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset = 'utf-8'>
        <script src='d3.v2.min.js'></script>
        <script>
        function draw(data){
            'use strict';
            d3.select('body')
                .append('ul')
                .selectAll('li')
                .data(data)
                .enter()
                .append('li')
                .text(function(data){
                    return data.name + ': '+ data.status;
                });
        }
        </script>
    </head>
    <body>
        <script>
            d3.json('jsonphp.php', draw);
        </script>
    </body>
</html>

我尝试了一些变体,例如重命名 json 标头,尝试沿变量获取“绘制”函数(是的,我知道这行不通),我认为 D3.js 可能不喜欢文件以“php”结尾的事实?没有返回错误告诉我它认为它正在工作,所以也许不是这样。这应该很简单,我知道如果我能做到这一点,我可以执行更复杂的输出,但这只是一千英里旅程的第一步。顺便说一句,尝试在 IE 9 和 Safari 5.1.7 中运行它,结果相同。提前致谢!

ADDENDUM DEC 5:我尝试在我的 html 文档中提醒 jsonphp.php 文件的长度并得到“未定义”。但是,我尝试使用另一个带有 js 扩展名的测试文件,除了这个 ([{"a":"-1.14","b":"4.14"},{"a":"-0.13","b":"1.38"},{"a":"-4.19","b":"1.43"},{"a":"-0.21","b":"3.34"}]) 之外什么都没有,它提醒了正确的数字 (4)。也使用测试我得到了可视化工作正常。所以问题是,要么 D3.js 不喜欢 php 文件,要么 php 文件有问题,即使它看起来没问题。

【问题讨论】:

  • 您遇到了什么错误(在浏览器控制台中)?
  • 感谢您的提问,meetamit,但控制台中没有错误(请参阅第一句话)。
  • 糟糕,我现在看到了。

标签: php html json d3.js


【解决方案1】:

尝试在 PHP 中设置 Content-Type 标头:

header("Content-Type: application/json");

在您致电json_encode之前

【讨论】:

  • 嗯...我按照建议在 json_encode 之前添加了该行并得到了以下信息:资源解释为文档,但使用 MIME 类型应用程序/json 传输...。没有该行就没有错误。在这两种情况下,d3test.htm 页面上都没有任何操作(没有错误,但也没有显示表格)。
  • 尝试删除末尾的“?>”。
  • 我按照建议从末尾删除了 ?>(并确保最后一行之后没有尾随空格)并且它没有改变任何内容:没有错误消息,但没有文本出现在也就是。
猜你喜欢
  • 2016-01-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-07-09
  • 2013-05-12
  • 2017-07-07
相关资源
最近更新 更多