如何用d3.js画扇形一张地图

来源：蜘蛛抓取(WebSpider) 时间：2017-10-28 07:36 标签： d3.js v4画力导向图
后使用快捷导航没有帐号？
查看: 9457|回复: 5
地图可视化（d3.js和heatmap.js)
论坛徽章:3
用d3.js和heatmap.js做的，感觉真的用这玩意去搞个GIS，还真不是不可能，不过太耗神了，涉及方方面面的技术、知识面。
很多GIS搞出来的效果不一定比这个好多少，而且理论上能够和Google Map集成
就当好玩一下了
(11.86 KB)
00:48 上传
(27.63 KB)
00:48 上传
(53.56 KB)
00:48 上传
论坛徽章:3
海南省的迁徙地图，不过是模拟数据，明天用真实数据运行一下，使用的技术为d3.js和sigma.js,实际上主要是个数据分析思路问题，并不是真的要把几百万用户上千万个点投射到web页面中，而且也做不到，而且技术上也没什么大不了的都是一些开源的框架，百度迁徙也不是百度开发的，不过如此而已。
(252.84 KB)
00:07 上传
新手上路, 积分 1, 距离下一级还需 49 积分
论坛徽章:0
好厉害呀！最近想用D3.js来可视化人口迁徙的情况，能不能分享一下你的demo,谢谢
新手上路, 积分 1, 距离下一级还需 49 积分
论坛徽章:0
想问问楼主我有经纬度的数据文件怎么去使用heatmap.js
有没有自动导入数据的接口啊
新手上路, 积分 2, 距离下一级还需 48 积分
论坛徽章:0
不错，标记一下。d3.js是哪个网站可以下载啊？
新手上路, 积分 2, 距离下一级还需 48 积分
论坛徽章:0
好棒，能不能分享一下代码【 D3.js 入门系列 --- 10 】 地图的绘制 - CSDN博客
【 D3.js 入门系列 --- 10 】 地图的绘制
& & 本人的个人博客为：
& & csdn博客为：
& & 转载请注明出处，谢谢。
& & 地图的制作在 D3 中可以说是最重要的一环。因为在进行数据可视化时，很多情况都会和地图联系在一起，如中国各省的人口多少，GDP多少等，都可以和地图联系在一起。
& & D3 中制作地图所需要的文件问 JSON 文件。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于 JSON 的语法格式，可以在：&
& & 学习。将 JSON 的格式应用于地理上的文件，叫做 GeoJSON 文件。本节就是用这种文件绘制地图。
& & 那么如何获得中国地图的 GeoJSON 文件呢，这其实真的有点麻烦，可以参照：&&进行制作，这不仅需要安装一些东西，还要研究一下制作方法，对想直接下载获取中国地图的 GeoJSON 文件的朋友可能感觉很不舒服，呵呵，其实我也是这样。
& & 好吧，我辛苦一点，将制作好的中国地图放上来与大家分享。
& & 中国地图的 GeoJSON 文件：
& & 这个文件是用& 上的数据，经过提取后制作而成，我还去掉了很多无用的信息，只保留的中国的各省份的名字和 id 号，在这里先感谢 Natural Earth 提供的数据。接下来我还会提取其他各个国家的数据，放到个人博客中供大家分享，希望能省去大家的时间，因为这个部分真的很麻烦。对于只希望进行可视化的朋友来说，估计不想做这个工作。后续制作好的各种
GeoJSON 文件，都会放到 中，请关注。
& & 好了，废话不说了。开始用 D3 来绘制地图吧。绘制分为三步：
& & 1. 设定投影函数
var projection = d3.geo.mercator()
.center([107, 31])
.scale(850)
.translate([width/2, height/2]);& & 由于 GeoJSON 文件中的地图数据，都是经度和纬度的信息，它们都是三维的。要在网页上显示的是二维的，所以要设定一个投影函数来转换经度纬度。如上所示，我们用 d3.geo.mercator() 的投影方式。关于各种投影方式的函数，可以参考：&
& & center() 函数是用于设定地图的中心位置，[107,31] 指的是经度和纬度。
& & scale() 函数用于设定放大的比例。
& & translate() 函数用于设定平移。
& & 2. 设定 path 函数
var path = d3.geo.path()
.projection(projection);& & 将上面的投影函数，作为参数，放入 path 中。这个 path 函数后面在绘制的时候就会用于转换经度纬度为平面信息，用于绘制。
& & 3. 读取文件并绘制
d3.json(&china.json&, function(error, root) {
if (error)
return console.error(error);
console.log(root.features);
svg.selectAll(&path&)
.data( root.features )
.append(&path&)
.attr(&stroke&,&#000&)
.attr(&stroke-width&,1)
.attr(&fill&, function(d,i){
return color(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));
});& & 和上几节一样，用 d3.json 读取文件。请注意，再次声明一下，这个函数的调用需要你搭建一个服务器。接下来，就是给 svg 中添加 path。要注意 attr(&d&,path) 这一行代码，前面也说过，这个其实相当于：
.attr(&d&,funtion(d){
return path(d);
})& & 请一定要注意这种省略用法。这里是有点难理解的。
& & 好了，看结果吧。
& & 我们的国家就被绘制出来了。要看完整代码和试试互操作的朋友，请点击下面链接查看，把鼠标放上去会有变色效果：
本文已收录于以下专栏：
相关文章推荐
首先查看效果，见下图：
绘制3D地球的步骤如下：
1. 创建投影，并确定初始旋转角度；
2. 创建地球方格生成器;
3. 创建路径生成器
4. 渲染地球方格；
5. 渲染初始...
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。因此做数据可视化前需要想明白2件事：
你有什么数据？你要传达什么信息？
本文中的示例中，将以不同的颜色显示澳大利亚不同...
d3.js是一个比较强的数据可视化js工具。利用它画了一幅中国地图，包含省会城市名称，如下图所示：
有时需要告诉用户地图上的一些目标，如果该目标是只需要一个坐标就能表示的，称其为“标注”。1. 标注是什么标注，是指地图上只需要一个坐标即可表示的元素。例如，在经纬度(116, 39)处画一个圆，在(1...
echarts地图扩展文件使用geoJson格式。
1、在线生成
http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json，但是最多生成到...
本文承接前文，利用shp数据制作Echarts支持的geoJson格式的地图数据。
一个可视化的工作案例
代码的边捆绑算法借鉴了D3.JS官方案例的js库。 链接如下：点击打开链接
本案例展示的上海市某一天12点出租车数据流量图，先将上海市进行区域划分，之后将出...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)17:59 提问
D3js在画出地图上，根据城市的坐标，在每个坐标的地方画一个光标，像在发光的那种动画效果.
这个网站上的光标点一样，刚开始学D3感觉一直都画不出来
画了好长时间，求助啊，大神们！
按赞数排序
我就是照着这个画出的地图，然后我有一个记录城市坐标的csv文件，csv对每个城市都有坐标显示
//显示地区名字
function chinaText(circles,texts){
d3.csv('json/china-cities.csv',function(c){
//坐标点实现圆点
circles.selectAll("circle")
.enter().append("svg:circle")
.attr("cx", function(d,i){return projection([d.lon,d.lat])[0];})
.attr("cy",function(d,i){return projection([d.lon,d.lat])[1];})
.attr("r",3)
.attr('fill','red');
//坐标点显示城市名字
texts.selectAll("text")
.append("svg:text")
.text(function(d){
.attr("x", function(d){
var local=projection([d.lon,d.lat]);
if(d.lon=='113.5575191')
return (local[0]-30);
else return local[0];})
.attr("y",function(d){
var local=projection([d.lon,d.lat]);
if(d.lat=='39.1439299') return (local[1]+10);
else return local[1];
.attr('fill','white')
.attr('font-size','14px');
--------------这是部分csv文件的数据---
117..1439299
显示地图和每个城市的原点，原点旁边的城市名字都可以正常显示--
然后我想像显示原点一样，把显示原点的代码换成显示成光点，发光的点，刚学d3js 对html5也不是很熟，知道思路，奈何语法不熟悉啊！大牛帮帮忙呗！
其他相关推荐

我要回帖

更多关于 d3.js v4画力导向图 的文章

 

随机推荐