d3.js学习9----地图的制作2

来源：互联网发布：蔬菜水果网络配送平台编辑：程序博客网时间：2024/05/29 19:47

d3.json() 不能直接读取本地文件，所以我就用xampp弄了web服务器，然后把代码里的<scriptsrc="http://d3js.org/d3.v3.min.js"> 链接里的d3.v3.min.js文件下载下来，放在本地，然后改成<script src=" d3.v3.min.js"> 然后用xampp的https://local/…………打开，终于显示正确了。

下面来细化一下那个地图的每一个步骤，自己做一个北京市的地图：

1、首先，我把上次的中国地图的代码直接在

d3.json("beijing.json",function(error, root){…………})把文件名改成了我重新下载的北京地图的数据，也就是beijing.json 上次有链接。

好笑的是显示出来超级小，就跟之前中国地图里面的北京大小一模一样。

原因出在投影方式这里：

varprojection = d3.geo.mercator()

.center([107,31])

.scale(850)

.translate([width/2,height/2]);

这里决定了地图的位置，大小等等，但是好难调啊，把它调大，偏移所错了，它就不见了。

第一个是说地图中心的精度和纬度的事情center() 设定地图的中心位置，[107,31] 指的是经度和纬度。

varprojection = d3.geo.mercator()

.center([120,31])

.scale(14000)

.translate([1200,3050]);

最终我改成这样，才让它大概就在左边的位置，并且足够大。

var path = d3.geo.path()

.projection(projection);//然后在path变量里面用这个projection

d3.json("beijing.json",function(error, root) {//然后path变量在很多里面就一直用到啦。。

if(error)

returnconsole.error(error);

console.log(root.features);

svg.selectAll("path")

.data(root.features )

.enter()

.append("path")

.attr("stroke","#000")

.attr("stroke-width",1)

.attr("fill",function(d,i){

returncolor(i);

})

.attr("d",path )

.on("mouseover",function(d,i){

d3.select(this)

.attr("fill","yellow");

})

.on("mouseout",function(d,i){

d3.select(this)

.attr("fill",color(i));

});

接着，要在地图的每个部分显示地名

svg.selectAll("text")

.data(root.features) //可以从文件里看到所有的总的叫eatures

.enter()

.append("text")

//设置各个文本（省份名称）显示的文字

.attr("transform",function(d,i)

{

if(d.properties.id=="20") //河北

{

return"translate("+(path.centroid(d)[0]-20)+","+(path.centroid(d)[1]+20)+")";

}

return"translate("+(path.centroid(d)[0]-10)+","+path.centroid(d)[1]+")"; //就是质心的意思喽，就是这一区域的中心的意思

})

//显示省名

.text(function(d)

{

return d.properties.name;

})

.attr("font-size",12);

由于接下来要弄多个图，所以我觉得还是应该把这个地图的画布绑在div上，但是不知道怎么绑，写在<div></div>里面它也不在里面。

网上看到了一个很棒的写法：

首先，在html文件里，定义两个div：

<body>

</div>

</div>

<scriptsrc="d3.v3.min.js"></script>

<scriptsrc="beijing.js"></script>

</body>

两个div分别叫part1和part2，要记住这里要把两个beijing.js的引用放在后面，因为里面有对html内容的引用。

接着，在.css文件里面设置一下这两个div的属性：

#part1 {

width:620px;

height:600px;

position:fixed;

top:0px;

left:0px;

border-color:#0000FF;

border: 2px solid ;

margin:0 auto;

}

#part2{

width:620px;

height:600px;

position:fixed;

top:0px;

left:650px;

border-color:#0000FF;

border: 2px solid ;

margin:0 auto;

}

这里我犯了一个错误，我觉得用绝对定位比较快，我记得绝对是absolute，结果一直写成postion:absolute，其实应该是fixed，才是对浏览器的绝对定位。

然后把之前在script里面的两个图表的代码都放在beijing.js里面，这里我就举例第一个地图的代码，就改了一个地方，选择了part1的那个div：

varwidth = 600;

varheight = 550;

varcolor = d3.scale.category20();

varsvg = d3.select("#part1").append("svg")//重点就是改这里，变成了d3.select(“part1”)

.attr("width", width)

.attr("height", height)

.append("g")

.attr("transform","translate(0,0)");

varprojection = d3.geo.mercator()

.center([120,31])

.scale(14000)

.translate([1200,3050]);

varpath = d3.geo.path()

.projection(projection);

varcolor = d3.scale.category20();

d3.json("beijing.json",function(error, root) {

if(error)

returnconsole.error(error);

console.log(root.features);

svg.selectAll("path")

.data(root.features )

.enter()

.append("path")

.attr("stroke","#000")

.attr("stroke-width",1)

.attr("fill",function(d,i){

returncolor(i);

})

.attr("d",path )

.on("mouseover",function(d,i){

d3.select(this)

.attr("fill","yellow");

})

.on("mouseout",function(d,i){

d3.select(this)

.attr("fill",color(i));

});

svg.selectAll("text")

.data(root.features)

.enter()

.append("text")

.attr("transform",function(d,i)

{

if(d.properties.id=="20")

{

return"translate("+(path.centroid(d)[0]-20)+","+(path.centroid(d)[1]+20)+")";

}

return"translate("+(path.centroid(d)[0]-10)+","+path.centroid(d)[1]+")";

})

.text(function(d)

{

return d.properties.name;

})

.attr("font-size",12);

虽然还没调好位置，但是看到这张图的时候好激动，证明这两个图被我成功地绑定在两个不同的div里了。

0 0