1

我对 Javascript 和 D3 都很陌生，我一直在尝试自己尝试网站上的示例。

我将以下内容用于 JS/HTML 代码：

<!DOCTYPE html>
<html>
    <head>

        <script src="http://d3js.org/d3.v3.min.js"></script>

        <style type="text/css">

        </style>

    <head>
    <body>
        <script>
        d3.json("mydata.json", function (data) { 
            var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500)

            canvas.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("width", function (d) { return d.age * 10; })
                .attr("y", function (d, i) { return i * 50; })
                .attr("fill", "blue")
        })
           </script>
    </body>
</html>

对于我的“mydata.json”，我正在使用：

[
    {"name": "Maria",   "age": 30},
    {"name": "Fred",    "age": 50},
    {"name": "Jason",   "age": 12}  
]

每次我尝试运行它时，它的结果都与 d3 示例页面上的示例不同。请帮忙，我试图弄清楚 d3 是如何工作的，而且我是一个新手程序员。

4

2 回答 2

1

如此处所述，问题源于使用file://样式 URL 时的安全限制。

除了在文件中嵌入 JSON 对象外，一种解决方案.js是通过 http 加载文件。这很容易使用nodejs实现！

按着这些次序：

  1. 安装 nodejs。
  2. 打开命令提示符，然后cd到您的演示文件夹。
  3. 键入命令：npm install Express。这会将 Express Web 服务器组件安装到.\node_modules文件夹中。
  4. 创建一个新的 web-server.js 文件，其内容如下所示。
  5. node .\web-server.js通过在命令行上键入来调用服务器。
  6. 创建一个名为的子文件夹，htdocs然后将您的.html、.js、 和.json文件以及任何其他Web 资产移入其中。这将是您网站的根文件夹。
  7. 打开浏览器并导航到http://localhost:9999/[your-html-file].html，其中 [your-html-file] 替换为实际文件名。

网络服务器.js

var server_port = 9999;
var application_root = __dirname + "\\htdocs",
    express = require("express"),
    path = require("path");
var app = express();
app.use(express.static(application_root));
app.use(app.router);
app.listen(server_port);
console.log("Web server listening on port " + server_port + ".");

这应该可以帮助您解决加载.json文件的问题。事实上，只要您需要一个轻量级的 Web 服务器来测试代码，它就很有用。

于 2014-07-21T14:11:48.763 回答
1

似乎您必须设置height属性才能显示某些内容。

调试此类问题的一个好方法是首先在没有 json 调用的情况下使一切正常。为此，我建议您使用 chrome javascript 控制台显示错误并使用 chrome 检查器查看 html 代码。

data = [{
    "name": "Maria",
    "age": 30
}, {
    "name": "Fred",
    "age": 50
}, {
    "name": "Jason",
    "age": 12
}]
//d3.json("mydata.json", function (data) { 
var canvas = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500)

canvas.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("width", function (d) {
        return d.age * 10;
    })
    .attr("height", "20px")        
    .attr("y", function (d, i) {
        return i * 50;
    })
    .attr("fill", "blue")
//})

jsFiddle：http: //jsfiddle.net/chrisJamesC/LX9BF/

于 2013-09-21T23:43:34.753 回答