您的位置：首页 > Web前端 > JavaScript

基于D3JS绘制中国地图

2015-07-05 22:49 741 查看

仿照D3JS官网上的美国地图制作了一个中国版的地图.

D3JS官网上的版本：
http://bl.ocks.org/NPashaP/a74faf20b492ad377312
中国版的地图效果：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.state{
fill: none;
stroke: #a9a9a9;
stroke-width: 1;
}
.state:hover{
fill-opacity:0.5;
}
#tooltip {
position: absolute;
text-align: center;
padding: 20px;
margin: 10px;
font: 12px sans-serif;
background: lightsteelblue;
border: 1px;
border-radius: 2px;
pointer-events: none;
}
#tooltip h4{
margin:0;
font-size:14px;
}
#tooltip{
background:rgba(0,0,0,0.9);
border:1px solid grey;
border-radius:5px;
font-size:12px;
width:auto;
padding:4px;
color:white;
opacity:0;
}
#tooltip table{
table-layout:fixed;
}
#tooltip tr td{
padding:0;
margin:0;
}
#tooltip tr td:nth-child(1){
width:50px;
}
#tooltip tr td:nth-child(2){
text-align:center;
}
</style>
<body>
<div id="tooltip"></div><!-- div to hold tooltip. -->
<svg width="560" height="470" id="statesvg"></svg> <!-- svg to hold the map. -->
<script src="china-zh2.js"></script> <!-- creates uStates. -->
<script src="d3.min.js"></script>
<script>

function tooltipHtml(n, d){    /* function to create html content string in tooltip div. */
return "<h4>"+n+"</h4><table>"+
"<tr><td>Low</td><td>"+(d.low)+"</td></tr>"+
"<tr><td>Average</td><td>"+(d.avg)+"</td></tr>"+
"<tr><td>High</td><td>"+(d.high)+"</td></tr>"+
"</table>";
}

var sampleData ={};    /* Sample random data. */
['JXI', 'LIA', 'TIB', 'NMG', 'SHH', 'CHQ', 'XIN', 'SHD', 'HEN', 'GUD', 'GUI', 'BEJ', 'MAC', 'TAJ', 'HLJ', 'HEB', 'ZHJ', 'ANH', 'GXI', 'HAI', 'JIL', 'SHX', 'HUN', 'YUN', 'FUJ', 'HUB', 'SHA', 'HKG', 'QIH', 'GAN', 'JSU', 'SCH', 'NXA', 'TAI']
.forEach(function(d){
var low=Math.round(100*Math.random()),
mid=Math.round(100*Math.random()),
high=Math.round(100*Math.random());
sampleData[d]={low:d3.min([low,mid,high]), high:d3.max([low,mid,high]),
avg:Math.round((low+mid+high)/3), color:d3.interpolate("#ffffcc", "#800026")(low/100)};
});

/* draw states on id #statesvg */
uStates.draw("#statesvg", sampleData, tooltipHtml);
</script>

</body>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航