Question

这让我疯了。 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"
}

Answer 1

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

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

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

selection.data（[values [，key]]）

使用当前选择连接指定的数据数组。该   指定的值是一个数组值数组，例如数组   数字或对象，或返回值数组的函数。

无法获得D3甚至打印文本

1 个答案: