<html>
<head>
<meta charset="utf-8">
<title>重庆网吧信息</title>
<script src="src/d3.v3.js"></script>
<style>
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
.svg{
width: 100%;
height: 90%;
}
#tool {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tool.hidden {
display: none;
}
#tool p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
#allmap{
width: 50%;
height: 80%;
overflow: hidden;
margin:0;
font-family:"微软雅黑";
background-color: #FFFFFF;
}
#partmap{
position: relative;
left: 50%;
top: -138%;
width: 50%;
height: 80%;
background-color: #FFFFFF;
}
.anchorBL{
display: none;
}
#chart{
position: relative;
left: 0px;
width: 50%;
height: 60%;
background-color:blanchedalmond;
}
#rect{
position: relative;
left: 50%;
width: 50%;
height: 60%;
top: -138%;
background-color:white;
}
#sandian{
position: relative;
left: 0px;
width: 50%;
height: 80%;
top: -138%;
background-color:blanchedalmond;
}
</style>
</head>
<body>
<div align="center">
<h1>重庆市网吧信息</h1></div>
<div id="tooltip" class="hidden">
<p><strong id="value"></strong></p>
</div>
<div id="allmap" width="500px" height="400px"></div>
<div id="chart" width="500px" height="400px">
<iframe src="pingx.html" style="width: 100%; height: 100%;"></iframe>
</div>
<div id="partmap">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dHV1z8mmWy1qvO4IjAlzvdH1uxsjDVZB"></script>
<div style="position: relative;left: 60%; top:1%;">
<font size="5" color="red">网吧详细位置</font></div>
</div>
<div id="rect">
<div style="position: relative;left: 60%; top:1%;">
<font size="5" color="red">外来人口比例</font></div>
<iframe src="bingtu.html" style="width: 100%; height: 100%;"></iframe>
</div>
<div id="sandian">
<iframe src="sand.html" style="width: 100%; height: 100%;"></iframe>
</div>
<script type="text/javascript">
var w = 900,
h = 1000;
var projection = d3.geo.mercator()
.center([107, 27])
.scale(40000)
.translate([w / 2.5, h - h / 3]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#allmap")
.append("svg")
.attr("class", "svg");
var a = d3.rgb(255,0,0);
var states = svg.append("svg:g")
.attr("id", "states");
d3.json("src/500100.json", function(collection) {
svg.selectAll("path")
.data(collection.features)
.enter()
.append("path")
.attr("fill",function(d,i)
{
return color(i);
})
.attr("stroke","black")
.attr("stroke-width","1px")
.attr("d", path)
.on("click",function(d)
{
d3.select(this)
.attr("fill",function(){
//console.log(d.properties.name);
part(d.properties.name);
return "white";
});
});
/* .on("mouseover",function(d)
{
d3.select(this)
.attr("fill",function(){
console.log(d.properties.name);
part(d.properties.name);
return "white";
});
})
.on("mouseout",function(d,i)
{
d3.select(this)
.attr("fill",color(i));
});*/
svg.selectAll("text")
.data(collection.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);
});
var positions = [];
var code = "white";
d3.csv("src/netbarinfor.csv", function(c) {
var location = svg.selectAll(".location")
.data(c)
.enter()
.append("svg:circle")
.attr("id", function(d) {
return d.code;
})
.attr("fill", function(d) {
return color(d.code);
})
.attr("cx", function(d, i) {
return projection([d.lng, d.lat])[0];
})
.attr("cy", function(d, i) {
return projection([d.lng, d.lat])[1];
})
.attr("r", 1)
.on("mouseover", function(d) {
//var id=0;
//id=d.SITEID;
//console.log(id);
var coor = projection([d.lng, d.lat]);
d3.select("#tooltip")
.style("left", coor[0] + 20 + "px")
.style("top", coor[1] + 20 + "px")
.select("#value")
.text(d.TITLE);
//alert(d.TITLE);
d3.select("#tooltip")
.classed("hidden", false);
d3.select(this).attr("r", 5)
var i=0,k=0;
// d3.csv("src/hydata_swjl_0.csv",function(root){
// var number=0,j=0;
// k++;
// for(j=0;j<1000;j++)
// {
// if(root[j].SITEID==id)
// {
// number++;
// }
// }
//
// var rectangle = svg.append("rect")
// .attr("x",800)
// .attr("y",400+10*(k-1))
// .attr("width",number*100)
// .attr("height",10);
//
//
// console.log(number);
// console.log(k);
//
//
// })
})
.on("click",function(d,i){
/*var coor = projection([d.lng, d.lat]);
d3.select("#tooltip")
.style("left", coor[0] - 200 + "px")
.style("top", coor[1] + 200 + "px")
.select("#value")
//.text(d.name,d.description)
.text(d.TITLE)*/
d3.select("#tooltip")
.classed("hidden", false);
})
.on("mouseout", function() {
d3.select("#tooltip").classed("hidden", true)
d3.select(this).attr("r", 1)
});
location.append("circle")
.attr("r", 1);
});
var dataset;
var color = d3.scale.category20();
function part(partpoint)
{
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事
重庆市网吧可视化代码.zip （18个子文件） 
重庆市网吧可视化代码 src 
test.csv 6KB netbarinfor.csv 201KB 500100.json 96KB hydata_swjl_0.csv 101.09MB datab.csv 647KB wb3.csv 2KB d3.v3.js 262KB
baidu.html 2KB js map.js 4KB sand.html 5KB bingtu.html 3KB css index.css 1KB .project 1KB index.html 10KB china.json 249KB excle hydata_swjl_0.csv 101.09MB data.csv 1.07MB pingx.html 4KB img 资源评论
oppdamss2020-02-21实战大数据可视化库：D3.js 网盘地址：https://pan.baidu.com/s/1Sir6qnU7Hdz5l3IHNjdNEQ 提取码：vmdi
小烂云
- 粉丝: 37
- 资源: 45
