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

Question

我正在尝试加载外部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

中

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

Answer 1

该代码是什么文件？ index.html（或某些等价物？）

您在使用json文件显示的文件夹中没有任何Web文件。 json文件需要与调用javascript的页面位于同一文件夹中，而不是与d3.js相同的文件夹

因此，假设您的网络文件位于根目录中，您将其称为d3-project，然后正确的路径为：app / assets / javascripts / us-states.json

此外，它是一个内部文件，因为您已经在服务器上拥有它。外部意味着您正在使用自己以外的Web服务器并下载它。

Answer 2

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

有关Rails应用程序中d3地图的示例，请参阅此处： https://github.com/lisafeather/map_in_app