0

这让我发疯了。Iv 按照教程进行操作，但我无法让这件事做最简单的操作。

我只是想开始。Iv 有一个骨架页面、一个基本的 JSON 文件和加载的 D3 V3 库。

我可以从检查员那里看到一切正常。JSON 加载正常，但没有任何反应。我只是想将一些单词打印成几个 li 元素，但我什么也没得到。我可以看到 ul 被附加到页面上，但没有别的。

没有 JS 错误，也没有任何可以指导我的东西。只是一个空白页。

我在这里做错了什么？！

我的标记：

<!DOCTYPE html>
    <html>    
      <head>
        <meta charset="utf-8">
        <title>D3</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script src="js/vendor/d3.v3.min.js"></script>
        <style>

        path {
          stroke: #fff;
          fill-rule: evenodd;
        }

        </style>
        <script>
        function draw(data){
          "use strict";
          d3.select("body")
          .append("ul") 
          .selectAll("li") 
          .data(data) 
          .enter() 
          .append("li")
          .text(function(d) {
            return 'Cant even see this message'; 
          });
        }
        </script> 
      <script>d3.json("json/status.json", draw);</script>
      </head>
      <body>
      </body>
    </html>

和我的 JSON 文件

{
  "status": "OK",
  "name": "TEST A"
}
4

1 回答 1

2

您var data的格式不正确。D3.js 假定您将向其传递列表，但您提供了一个对象。让您入门的一个简单解决方法是将 status.json 更改为：

[{
  "status": "OK",
  "name": "TEST A"
}]

来自 API 文档：https ://github.com/mbostock/d3/wiki/Selections#wiki-data

selection.data（[值[，键]]）

将指定的数据数组与当前选择连接起来。指定值是数据值数组，例如数字或对象数组，或返回值数组的函数。

于 2013-04-10T23:40:37.033 回答