无法使用 d3.js 加载外部 json 文件答案

【问题标题】：not able to load external json file using d3.js无法使用 d3.js 加载外部 json 文件
【发布时间】：2013-11-01 05:24:47
【问题描述】：

我正在尝试加载外部 json 文件并将其与 d3.js 一起使用，但它似乎没有加载（我在浏览器中看不到 us-states.json 文件）该文件并且我找不到任何相关错误。这是我的代码：-

我收到此错误：- ActionController::RoutingError (No route matches [GET] "/us-states.json"):

$(document).ready(function() {
                      //Width and height
        var w = 500;
        var h = 300;

        //Define map projection
        var projection = d3.geo.albersUsa()
                           .translate([w/2, h/2])
                           .scale([500]);

        //Define path generator
        var path = d3.geo.path()
                    .projection(projection);

        //Create SVG element
        var svg = d3.select("#testing")
                                .append("svg")
                                .attr("width", w)
                                .attr("height", h);

        //Load in GeoJSON data
        // json = JSON.parse( "us-states.json" );
        // var json = {"my": "json"};
        d3.json("us-states.json", function(error, json) {
                if (error) return console.warn(error);
                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .style("fill", "steelblue");

        });
});

文件 us-state.json 位于我的 javascript 文件所在的同一文件夹中。

更新

javascript 控制台中的错误是这样的：-

Failed to load resource: the server responded with a status of 404 (Not Found)

在文件 us-states.json 中

显示文件的附加屏幕截图位于项目文件夹中：-

【问题讨论】：

“它似乎没有加载”是什么意思？
@LarsKotthoff 我的意思是我在浏览器中看不到 us-states.json 文件
这表明它不存在。仔细检查您是否已将其上传到正确的位置。
@LarsKotthoff 是的，它在同一个文件夹中我也收到此错误 ActionController::RoutingError (No route matches [GET] "/us-states.json"):
您没有告诉我们有关您的网络服务器设置/配置的任何信息。浏览器说它不存在，所以那里一定有问题。在任何情况下，您的问题都不是由 D3 引起的/与 D3 相关的。

标签： jquery json d3.js

【解决方案1】：

该代码在哪个文件中？ index.html（或类似的？）

与 json 文件一起显示的文件夹中没有任何 Web 文件。 json文件需要和调用javascript的页面在同一个文件夹，和d3.js不在同一个文件夹

因此，假设您的 Web 文件位于您的根目录中，您将其称为 d3-project，那么正确的路径应该是：app/assets/javascripts/us-states.json

此外，它是一个内部文件，因为您的服务器上已经有了它。外部意味着您访问的不是您自己的网络服务器并下载它。

【讨论】：

代码在 home.html 中，我也试过给出路径，但没有成功

【解决方案2】：

您也可以将 us-states.json 文件粘贴到您的公用文件夹中，并将其视为本地文件（即保持您的代码不变）。

在 Rails 应用程序中查看 d3 地图示例： https://github.com/lisafeather/map_in_app

【讨论】：