Question

我正在尝试制作德克萨斯州奥斯汀的地图（并最终将其用于D3.js项目），但我无法让地图显示出来。我有一个.json文件，我正在阅读以下程序，但我在我的控制台中收到此错误：

http://localhost:8000/practice/code/austinshapefiles/tract2.json 404（找不到档案）

我已经验证了tract2.json文件位于正确的位置。这是我的html地图文件，其路径为http://localhost:8000/documents/d3js_projects/practice/code/austinmap.html：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>

<body>
<script src="..//d3/d3.v3.js" charset="utf-8"></script>
<script src="..//d3/topojson.js"></script>

<script>

/* JavaScript goes here. */

var width = 1200,
    height = 550;

var margin = {top: 20, right: 10, bottom: 30, left: 40},
    scatterwidth = width - margin.left - margin.right,
    scatterheight = height - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width*.5]);
var y = d3.scale.linear()
    .range([height*.9, 0]);

  var svg1 = d3.select("body").append("svg")
      .attr("width", scatterwidth + margin.left + margin.right)
      .attr("height", scatterheight + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


d3.json("/practice/code/austinshapefiles/tract2.json", function(error, json, centroid) {
  if (error) return console.error(error);
  console.log(json);  
  var subunits = topojson.feature(json, json.objects.tract);

  var mapg = svg1.append("g")
    .attr("transform","translate("+width*.2+",0)")
    .attr("id", "mapg");

  var projection = d3.geo.albers()
      .center([0, 30.2500])
      .rotate([97.7500,0])
      .scale(height*100)
      .translate([width/2, height/2]) ;  
  var path = d3.geo.path()
      .projection(projection) ; 
  mapg.append("path")
      .datum(subunits)
  var tryme ; 
  mapg.selectAll(".subunit")
      .data(topojson.feature(json, json.objects.tract).features)
      .enter().append("path")
      .attr("d", path)
      .attr("id", function(d) {return "tract"+d.id.substring(9,21);})
        .attr("fill", "rgb(256,256,256)")
        .attr("stroke", "black")
        .attr("stroke-width", .1)
        ;

    //add the centroid circles 
     mapg.selectAll(".subunit")
      .data(topojson.feature(json, json.objects.tract).features)
        .enter()
        .append("circle")
        .attr("class", "point")
        .attr("r", 5)
        .attr("fill", "green")
        .attr("id", function(d){return "centroid"+d.id.substring(9,21);})
        .attr("visibility", "hidden")
        .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) ; 

    mapg.selectAll(".subunit")
    .data(topojson.feature(json, json.objects.tract).features)
        .enter()
        .append("div")
        .attr("class", "tooltip")
        .attr("id", function(d){return "tooltip"+d.tractfull.substring(9,21);})
        .attr("transform", function(d){return "translate(" + path.centroid(d) + ")";}) 
        .style("opacity", .8) 
        .html("try<br/>");;

  ;
});



</script>

谢谢！

Answer 1

事情是，

/path/to/file.json

是绝对路径，可能会解析为

http://localhost:800/path/to/file.json

和

path/to/file.json

将解析为

http://localhost:8000/documents/d3js_projects/practice/code/path/to/file.json

您准确服务的目录是什么？

修改： 好的，所以你要服务

C:\Users\garson

您的HTML文件是

C:\Users\garson\Documents\d3js_projects\practice\code\austinmap.html

您的数据文件位于

C:\Users\garson\Documents\d3js_projects\practice\code\austin‌shapefiles\tract2.json

您正在

访问HTML文件

http://localhost:8000/documents/d3js_projects/practice/code/austinmap.html

这很好，花花公子，虽然有一个令我困扰的案例差异，但它可能是一个错字（文件！==文件）。

然后，从此文件中，您尝试访问

/practice/code/austinshapefiles/tract2.json

解析为

C:\Users\garson\practice\code\austinshapefiles\tract2.json

看？这就是问题所在。你应该试试

d3.json("documents/d3js_projects/practice/code/austinshapefiles/tract2.json", ...

（请确保仔细检查＆＃34;文件＆＃34;但是）的情况。

404错误 - 制作地图时无法找到JSON文件，但看起来它位于正确的位置

1 个答案: