这是一个创建于 4403 天前的主题，其中的信息可能已经有所发展或是发生改变。
其实没怎么利用 meteor 的特性了，完全是冲着 meteor 有 d3 支持和部署空间的光。
地址在 http://goo.gl/JJpsG (计算量比较大，cpu不行的电脑慎点)
这个是我用来练习 nodejs 抓取，和用 d3 做数据可视化的小作品。
从几个网站上(比如 trainby.com)抓下了车次信息，再用 google 的 geocoder API 获取地址坐标解析出来。但是结果都有不准确的地方（整体错误率不超过 1% 吧 所以还好），反应在图上就是几个莫名奇妙的点和线路。
todo:
1 增加的地点的hover效果，显示地名什么的(用常用的方法比如title，bootstrap 的 tooltips 都不起作用了，还需要研究下怎么回事)
2 增加列车类型的区分。
3 修复错误数据脚本，并定期更新准确数据(哎，要是这种开放数据有个服务能提供更友好的 API 就好了）
地址在 http://goo.gl/JJpsG (计算量比较大，cpu不行的电脑慎点)
这个是我用来练习 nodejs 抓取，和用 d3 做数据可视化的小作品。
从几个网站上(比如 trainby.com)抓下了车次信息，再用 google 的 geocoder API 获取地址坐标解析出来。但是结果都有不准确的地方（整体错误率不超过 1% 吧 所以还好），反应在图上就是几个莫名奇妙的点和线路。
todo:
1 增加的地点的hover效果，显示地名什么的(用常用的方法比如title，bootstrap 的 tooltips 都不起作用了，还需要研究下怎么回事)
2 增加列车类型的区分。
3 修复错误数据脚本，并定期更新准确数据(哎，要是这种开放数据有个服务能提供更友好的 API 就好了）
第 1 条附言 · 2012-12-17 08:39:51 +08:00
在上次基础更新一次，一期 TODO 里的事情基本完成：
1 hover 显示站名有了，原来是需要 svg:title 来支持才行～
2 列车类型选择和颜色高亮都做了，效果不太好。
3 修复错误的数据，大概修复了200多错误坐标，预计还有100个剩余，这个真的很难做。
TODO 2:
1 可以高亮指定车次的线路, 比如 D21 K29 等。
2 火车站的详细信息，通过几个车，附近车站等～。
3 查看TOP10 最长线路，最多站数，经过的线路最多等...的排行榜。
1 hover 显示站名有了，原来是需要 svg:title 来支持才行～
2 列车类型选择和颜色高亮都做了，效果不太好。
3 修复错误的数据，大概修复了200多错误坐标，预计还有100个剩余，这个真的很难做。
TODO 2:
1 可以高亮指定车次的线路, 比如 D21 K29 等。
2 火车站的详细信息，通过几个车，附近车站等～。
3 查看TOP10 最长线路，最多站数，经过的线路最多等...的排行榜。
第 2 条附言 · 2012-12-23 21:05:29 +08:00
第2次更新
1 修改了一些交互设计，增加了按照车号搜索的功能，比如 T27,K186 什么的～
2 用了新的 tooltip 反应更快，效果更好
3 改用了 Albers 投影法，这个多说点：之前大家提出了地图变形问题，我也趁机学习一点地图学的基本概念，这里现学现卖一下。
地球是个球体（去看地球仪），所以要把位置关系投射到平面上需要做一些特殊处理才行。
如果直接按照经度纬度作为x轴y轴的话，能把球面变成平面，但是在越靠近极点的地方，比例尺就会越大，靠近极点的经线比较短，每一度转换到x轴上在平面图中就被放大了。这种方法叫 Mercator
投影法。之前用的就是这样的～见11楼截图。
为了避免这种失真，在跨经度很大的中纬度国家，经常使用 Albers 投影法，相当于把球形映射到锥形上，在这张图上面积不会发生是失真。一般大家看到的带有曲线纬线的中国地图都是使用这种投影法的。
以下链接可以参考：
http://en.wikipedia.org/wiki/Map_projection
https://github.com/mbostock/d3/wiki/Geo-Projections
1 修改了一些交互设计，增加了按照车号搜索的功能，比如 T27,K186 什么的～
2 用了新的 tooltip 反应更快，效果更好
3 改用了 Albers 投影法，这个多说点：之前大家提出了地图变形问题，我也趁机学习一点地图学的基本概念，这里现学现卖一下。
地球是个球体（去看地球仪），所以要把位置关系投射到平面上需要做一些特殊处理才行。
如果直接按照经度纬度作为x轴y轴的话，能把球面变成平面，但是在越靠近极点的地方，比例尺就会越大，靠近极点的经线比较短，每一度转换到x轴上在平面图中就被放大了。这种方法叫 Mercator
投影法。之前用的就是这样的～见11楼截图。
为了避免这种失真，在跨经度很大的中纬度国家，经常使用 Albers 投影法，相当于把球形映射到锥形上，在这张图上面积不会发生是失真。一般大家看到的带有曲线纬线的中国地图都是使用这种投影法的。
以下链接可以参考：
http://en.wikipedia.org/wiki/Map_projection
https://github.com/mbostock/d3/wiki/Geo-Projections
 |
1
loddit OP 代码很简单，为了方便部署我把需要的数据也放在 git 里了。https://github.com/loddit/railway
|
 |
2
isy 2012-12-09 19:22:16 +08:00
二手本完全卡死。等楼下回复
|
 |
3
lackar 2012-12-09 19:25:27 +08:00
cool
|
 |
4
ispinfx 2012-12-09 19:26:08 +08:00
很流畅，但没见到hover……准确来说是一个字都没看到
|
 |
5
bluef 2012-12-09 19:48:14 +08:00
cool!
|
 |
6
gavingeng 2012-12-09 20:01:28 +08:00
黑夜里的萤火虫，其他啥也没了
|
 |
7
pepsin 2012-12-09 20:11:45 +08:00
很漂亮
|
|
8
loddit OP 每个点是可以点击的，大家发现了没？
|
 |
9
yangchenyun 2012-12-09 21:23:10 +08:00
好棒啊，直接看到上海出发的铁路线。
|
 |
10
citydog 2012-12-09 21:38:55 +08:00
没感觉，跟打开一般网页一样的...
|
 |
11
zl8723 2012-12-09 21:45:05 +08:00
 啥也看出来呀，就一张可以点的图，没其他信息。是这样么？ |
 |
12
mew7wo 2012-12-10 00:25:01 +08:00
楼主有没什么d3的资料?
最近也在弄d3,打算用来做一些可视化的东西 |
 |
13
kofj 2012-12-10 10:45:21 +08:00
真心的一个字都没有看到，就只有图了
|
|
14
loddit OP  1
@mew7wo 这里有一本O'reilly 的书 http://www.douban.com/group/topic/33530044/
属于入门的，具体使用时还要看文档。d3要用好我觉得需要有点图形方面知识或灵感吧～我也需要补补 |
 |
16
chuangbo 2012-12-10 11:35:07 +08:00
地图变形了，应该用 Albers 投影 http://www.cnblogs.com/flyingfish/archive/2007/03/12/671844.html
可以用 d3.geo.albers().origin([105, 38]) 进行转换 |
 |
17
holmesabc 2012-12-10 11:55:58 +08:00
其实我完全不知道，这是干什么的。。。
|
|
18
loddit OP |
 |
19
Ricepig 2012-12-10 13:45:45 +08:00
@chuangbo albers投影是为了等积，Google地图所采用的Web Mercator对于小比例尺的图形其实基本够用。
|
|
20
Ricepig 2012-12-10 13:47:16 +08:00 1
lz可以考虑结合铁路路网（这个是公开的），这样站站连接就可以不一定是直线。并且套上行政境界为底图，这样能看的更清楚一点。
|
 |
23
cnfy 2012-12-10 16:45:41 +08:00
|
 |
24
xsaps 2012-12-10 16:49:05 +08:00
有火车直通台湾半岛? 应该包含了飞机航线吧?
|
 |
25
GreatHan 2012-12-10 17:04:34 +08:00
是 canvas画的吧？
|
|
26
loddit OP 更新一次，一期 TODO 里的事情基本完成：
1 hover 显示站名有了，原来是需要 svg:title 来支持才行～ 2 列车类型选择和颜色高亮都做了，效果不太好。 3 修复错误的数据，大概修复了200多错误坐标，预计还有100个剩余，这个真的很难做。 TODO 2: 1 可以高亮指定车次的线路, 比如 D21 K29 等。 2 火车站的详细信息，通过几个车，附近车站等～。 3 查看TOP10 最长线路，最多站数，经过的线路最多等...的排行榜。 4 该设计下界面交互了。 |
 |
27
shuson 2012-12-17 10:53:49 +08:00
期待加入搜索功能
|
 |
28
thwawar 2012-12-17 21:27:28 +08:00 1
建议加上以下特性：
1. 缩放：这个挺简单的：https://github.com/mbostock/d3/tree/master/examples/zoom-pan 2. 搜索：给节点加上 id ，然后参考这里： http://bl.ocks.org/3828981 我用过的资源： 1. More examples: http://bl.ocks.org/mbostock 2. Example source code: https://github.com/mbostock/d3/tree/master/examples 3. API Reference: https://github.com/mbostock/d3/wiki/API-Reference >>> 这是我做的效果(可搜索，呃，其实搜索框是用了 bootstrap-typeahead ......的) ：http://ahorn.me/topo |
|
29
thwawar 2012-12-17 21:58:40 +08:00 1
更多的建议
-------------- 1. 给出一种方式：一开始不绘制所有线路，当点击某个城市时进行动态绘制，再点击时隐藏原来的线路加载新的线路。给一个下拉框让用户切换两种方式。 2. 考虑直接在 Google maps上绘图，比如这个： http://bl.ocks.org/899711 |
|
30
loddit OP @chuangbo @Ricepig 修改成 Albers 投影啦，谢谢你们让我长了不少知识
@thwawar 谢谢你的建议和资源，部分已经采用，“直接在 Google maps上绘图”或着增加地图其实效果会有些乱，而且绘制地图的投影法不同，能在座标上对上就已经很难做到。 其实目前最让我头痛还是错误数据的问题，很多小地方，难以得到正确的座标。往往需要人工修订。 不知到大家用什么办法没有,目前我是用地名在goolge api获取座标： http://maps.googleapis.com/maps/api/geocode/json?address=%E8%80%81%E5%AF%A8%E5%B1%B1&sensor=false |
|
31
chuangbo 2012-12-23 23:47:32 +08:00 2
|
|
32
loddit OP |
|
33
chuangbo 2012-12-24 00:49:31 +08:00
@loddit 这个精度我觉得在 Web 上已经太高了，100K 以下才是可以接受的范围。我还有更高的，会让浏览器卡死。。
|
 |
34
claliu 2012-12-24 01:16:01 +08:00 1
@loddit @chuangbo
JSON 文件用在 Web 上的时候，在不影响设计初衷和表达数据的前提下，文件越小越好。我用过的表现中国人口密度的地图（包括台湾）的 JSON 文件只有不到 56 K，所以加载很快。 我是用下面的这个网站简化数据的， http://mapshaper.com/test/MapShaper.swf |
 |
35
dexter 2012-12-24 17:31:17 +08:00
很好
有心 关注 |
 |
36
kebot 2012-12-25 00:16:00 +08:00
很赞, 能看到我家, 哈哈
|
|
39
mew7wo 2013-01-23 17:10:39 +08:00
楼主用d3的时候，是否遇到过中文显示乱码的事情。
|
Select Language