外部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
ファイルを表示するために添付されたスクリーンショットは、プロジェクト フォルダーにあります:-