Question

我对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是如何工作的，我是一个新手程序员。

Answer 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/

Answer 2

作为stated here，问题源于使用file://样式网址时的安全限制。

除了在.js文件中嵌入JSON对象之外，一种解决方案是通过http加载文件。使用nodejs即可轻松实现这一目标！

请按照以下步骤操作：

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

网络-server.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服务器来测试代码，它就非常有用。

遇到d3.json问题，不起作用

2 个答案: