Javascript 在d3.json上有问题，不'；行不通_Javascript_Json_D3.js

Javascript 在d3.json上有问题，不'；行不通

javascript json d3.js

Javascript 在d3.json上有问题，不'；行不通,javascript,json,d3.js,Javascript,Json,D3.js,我对Javascript和D3都相当陌生，我自己也在尝试网站上的例子我将以下内容用于JS/HTML代码： <!DOCTYPE html> <html> <head> <script src="http://d3js.org/d3.v3.min.js"></script> <style type="text/css"> </style> &l

我对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>

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

似乎您必须设置

高度

属性才能显示某些内容

调试这类问题的一个好方法是，首先在不使用json调用的情况下让一切正常工作。为此，我建议您使用ChromeJavaScript控制台显示错误，使用ChromeInspector查看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")
//})

jsiddle:

由于使用

文件：//

样式的URL时存在安全限制，因此出现了问题

除了在

.js

文件中嵌入JSON对象之外，还有一种解决方案是通过http加载文件。这是很容易实现使用

遵循以下步骤：

打开命令提示符，然后将

cd

放入演示文件夹

键入命令：npm install Express
。这将把Express web server组件安装到

\node\u modules

文件夹中

创建一个新的web-server.js文件，其内容如下所示

通过在命令行上键入

节点。\web server.js

来调用服务器

创建名为

htdocs

的子文件夹，然后将

.html

、

.js

和

.json

文件以及任何其他web资产移动到其中。这将是您网站的根文件夹

打开浏览器并导航到

http://localhost:9999/[您的html文件].html

，其中[您的html文件]替换为实际文件名

web服务器.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

加载本地文件，例如，请参阅。不确定您期望的是什么，但您的代码设置了

元素的

宽度

属性，而不是

高度

；类似地，它设置

位置，但不设置

位置。如果没有这些属性，结果将不会很有趣。

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 + ".");