【问题标题】:d3.js map shows emptyd3.js 地图显示为空
【发布时间】:2013-06-25 18:05:31
【问题描述】:

这让我发疯,我不知道我的错误在哪里,在 json 文件中(看起来不像)、加载地图的代码,甚至是应用的颜色。 我已经与noob d3.js world example 进行了比较,这对我有用,我只需替换坐标、json 地图文件和要显示我的区域的标签,瞧,不起作用,呵呵。

这是我的html + js:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: green;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<!--<script src="http://d3js.org/d3.v3.min.js"></script>-->
<!--<script src="http://d3js.org/topojson.v0.min.js"></script>-->
<script type="text/javascript" src="js/d3.v3.js"></script>
<script src="js/topojson.v0.min.js"></script>
<script>
var width = 960,
    height = 500;

var projection = d3.geo.mercator()
        .center([-3.5,40.5])
        .scale(40000)
//    .scale(900)
//    .rotate([-180,0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");


//d3.json("maps/world-110m2.json", function(error, topology) {
//d3.json("maps/prov_37.json", function(error, topology) {
//d3.json("maps/prov_40.json", function(error, topology) {
d3.json("maps/prov_28.json", function(error, topology) {
    g.selectAll("path")
//      .data(topojson.object(topology, topology.objects.countries)
//      .data(topojson.object(topology, topology.objects.prov_40)
//      .data(topojson.object(topology, topology.objects.prov_37)
      .data(topojson.object(topology, topology.objects.prov_28)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("path")
            .attr("d", path.projection(projection));
});

svg.call(zoom)
</script>
</body>
</html>

好吧,我在代码中尝试过的 json 文件,你可以从这里下载它们(还有 html 文件):test files

请注意,我的每个 json 地图都有不同的 ID 或标签来显示区域,所以每次我在 HTML 代码中切换 json 地图时,我都会切换到正确的 ID/标签。例如地图“prov_28_topo.json”的ID是“prov_28”:

},
"objects": {
    "prov_28": {
        "type": "GeometryCollection",
        "geometries": [{

【问题讨论】:

    标签: map d3.js topojson


    【解决方案1】:

    我只查看了您的一个 json 文件 prov_28_topo.json,它不是有效的 JSON。

    你有{"type":"Topology","transform":{"scale":[0.0007357596319631963,0.0004301291039103907],"translate":[-4.57907617,38.02244023]},"objects":{"prov_28:{"type"

    应该是:

    {"type":"Topology","transform":{"scale":[0.0007357596319631963,0.0004301291039103907],"translate":[-4.57907617,38.02244023]},"objects":{"prov_28":{"type"

    _28之后的引用。改变使一切正常。

    【讨论】:

    • 你是对的,但从那我发现了真正的问题,我对文件和 ID 使用了相同的名称,而文件实际上是不同的,它以 '_topo' 结尾.我已经看了几个小时,找不到这样的菜鸟错误。谢谢!!
    猜你喜欢
    • 2017-07-24
    • 1970-01-01
    • 2019-07-05
    • 1970-01-01
    • 2017-12-06
    • 1970-01-01
    • 1970-01-01
    • 2021-11-06
    • 1970-01-01
    相关资源
    最近更新 更多