为什么用d3.js绘制中国地图只读取json数据最后一个城市的地图

huangyu03 发布于 2013/11/08 10:14
阅读 7K+
收藏 0

OSC年度开源问卷新鲜出炉,你的回答对我们很重要,参与开源可以从这份问卷开始>>>

运用d3.js绘制中国地图,可是总是读取了china.json数据的最后一个城市进行绘制,不知道是哪里出了问题,麻烦会的同志们给点提示,我的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>China</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
    <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/topojson.v0.min.js"></script>
</head>
<body>
    <script type="text/javascript">


        var width =  960,
            height = 500;

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

var projection = d3.geo.mercator()
            .translate([width/2,height/2])
            .center([105, 38])
.scale(550);

        var path = d3.geo.path()
          .projection(projection);
  
        d3.json("china.json", function(json) {

svg.selectAll("path")
 .data(json.features)
 .enter()
 .append("path")
          .attr("d", path)
 .style("fill","steelblue")
 .style("stroke-width", "1")
          .style("stroke", "white");


        });


    </script>
</body>
</html>

运行结果如下:

加载中
0
yangboy2013
yangboy2013
我也遇到了同样的问题?求解???????
0
花满楼

楼主的功能实现了吗,能不能展示一下,学习中。

另外“china.json” 的数据能不能分享一份啊?


0
pauli
pauli

引用来自“花满楼”的评论

楼主的功能实现了吗,能不能展示一下,学习中。

另外“china.json” 的数据能不能分享一份啊?


http://www.ourd3js.com/demo/china.json
0
灿若暖阳
灿若暖阳

你的json格式不对,最外面用中括号,相同的健值对用花括号括起来。

[
    {
        "book": "A",
        "scores": 45
    },
    {
        "book": "B",
        "scores": 34
    },
    {
        "book": "C",
        "scores": 54
    },
    {
        "book": "D",
        "scores": 27
    },
    {
        "book": "E",
        "scores": 70
    },
    {
        "book": "F",
        "scores": 25
    },
    {
        "book": "G",
        "scores": 92
    },
    {
        "book": "H",
        "scores": 22
    },
    {
        "book": "I",
        "scores": 40
    },
    {
        "book": "J",
        "scores": 10
    },
    {
        "book": "K",
        "scores": 40
    }
]
比如这样,可以运行,我也遇到过同样的问题,只能读取最后一位。
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部