标签: topojson
使用D3.js仅渲染topojson地图的一部分
我正在使用D3.js库从US Census shapefile创建地图.我正在寻找创建一个完整的美国地图,这是没有问题的,以及每个州的地图.
我的工作流程使用人口普查数据,ogr2ogr在命令行根据需要进行了更改,然后由shpescape.com转换为topojson或geojson,因为topojson模块的node.js下载错误(请参阅下面的编辑解决方案)问题).
我的问题更多的是一个实用的问题而不是其他任何问题 - 当提供此代码时(以http://bl.ocks.org/mbostock/4707858为模型):
var width = 640,
height = 500;
var projection = d3.geo.albers();
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("mt_geo.json", function(error, mt_topo) {
var states = topojson.feature(mt_topo, mt_topo.objects.states),
state = states.features.filter(function(d) { return d.id === 34; })[0];
projection
.scale(1)
.translate([0,0]);
var b = path.bounds(state),
s = .95 / Math.max ((b[1][0]-b[0][0])/width, (b[1][1]-b[0][1])/height),
t = [(width-s*(b[1][0]+b[0][0]))/2, (height-s*(b[1][1]+b[0][1]))/2];
projection
.scale(s)
.translate(t);
svg.append("path")
.datum(states)
.attr("class", "feature")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, …推荐指数
解决办法
查看次数
使用d3.js和TopoJSON,Albers Siberia投影进行映射
我正试图用d3.js制作一个等值线,但我刚开始时就被卡住了.我发现了一个Shape文件,并从它产生的以GeoJSON和TopoJson文件,就像在这里.该地图使用Albers-Siberia投影.我发现这个预测:
预测:Albers Equal-Area Conic
- 单位:米
- Spheroid:Krasovsky
- 中央经络:105
- 标准并行1:52
- 标准并行2:64
- 参考纬度:0
- 假东方:18500000
- 假北距:0
PROJ.4:+ proj = aea + lat_1 = 52 + lat_2 = 64 + lat_0 = 0 + lon_0 = 105 + x_0 = 18500000 + y_0 = 0 + ellps = krass + units = m + towgs84 = 28,-130,-95 ,0,0,0,0 + no_defs
MapInfo:"Albers-Siberia",9,1001,1,710,0,64,52,18500000,0.
所以我最终得到了这个代码,它什么也没做(甚至freez up),出了什么问题？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Choropleth</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script type="text/javascript" src="d3/queue.v1.min.js"></script>
<script type="text/javascript" src="d3/topojson.v0.min.js"></script>
</head>
<body>
<h1>My …推荐指数
解决办法
查看次数
无法在ubuntu上安装topojson
我一直在尝试按照Mike Bostock的Let's Make a Map教程http://bost.ocks.org/mike/map/安装topojson ,我相信我已经设法获得最新版本的Node.js和npm.$ ogr2ogr也适用.我对编程和Ubuntu很陌生,并且真诚地感谢npm install topojson -g为什么会出现以下错误.当我用sudo尝试相同的命令时会产生如下错误:npm ERR!注册表错误解析json和gyp ERR!stack错误:无法安装节点的"pre"版本,请改用--nodedir标志
谢谢!
npm ERR! Error: EACCES, open '/home/natecraft/.npm/7edf76d6-topojson.lock'
npm ERR! { [Error: EACCES, open '/home/natecraft/.npm/7edf76d6-topojson.lock']
npm ERR! errno: 3,
npm ERR! code: 'EACCES',
npm ERR! path: '/home/natecraft/.npm/7edf76d6-topojson.lock' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! System Linux 3.5.0-23-generic
npm ERR! command "/home/natecraft/.nvm/v0.10.15/bin/node" "/home/natecraft/.nvm/v0.10.15/bin/npm" "install" "topojson" "-g"
npm ERR! cwd /home/natecraft/Downloads/node-latest-install
npm ERR! node -v v0.10.15
npm ERR! npm -v 1.3.5 …推荐指数
解决办法
查看次数
如何根据邮政编码制作氯文库？
我想使用d3创建一个氯色容器,为美国不同的邮政编码区域分配不同的颜色.与此类似,除了邮政编码:http: //bl.ocks.org/mbostock/4060606
但是,我找不到美国邮政编码的topojson.这提供了一种为zip codess生成topojson的方法:https://github.com/mbostock/us-atlas
但我的Mac已经运行了几个小时的脚本.奇怪的是,我在互联网上找不到任何成功生成邮政编码文件的人.
我也可以使用zip3区域 - 基本上是前3位数字的邮政编码区域.但是,我找不到这个部门的任何topojson.
我在哪里可以找到包含美国邮政编码或zip3区域形状的topojsons或文件？
推荐指数
解决办法
查看次数
D3.geo:球面弧线而不是直线的平行线？
我刚刚创建了一个D3js globe localisator,它看起来像这样:
如果仔细观察,红色方块看起来很难看,因为它不符合地球的曲线.我有十进制度的区域边界框:
var bb = {W:-5.0, N:50.0, E:10.0, S:40.0 }
我画的线条如下:
svg.append("path")
.datum({type: "LineString", coordinates:
[[-5, 40], [-5, 50], [10, 50], [10, 40], [-5, 40]]
})
.attr("d", path);
对于较大的区域,它甚至与预期相反(对于边界框):
如何添加相当优雅的球形弧线？
推荐指数
解决办法
查看次数
如何将多个topojson文件合并到单个topojson文件中
我有美国州topojson和加拿大州topojson我想将它们合并为单个文件.有人可以告诉我如何将两个文件合并到单个topojson文件中.我正在创建地图时使用墨卡托投影
推荐指数
解决办法
查看次数
d3.js geo worldmap - 合并俄罗斯(从美国右边的左边小部分向左移位)
我在这里创建了一个简单的d3世界地图:http://bl.ocks.org/wiesson/ef18dba71256d526eb42
是否有一种简单的方法可以将俄罗斯的一小部分(如图所示)向右移动,而无需创建新的topojson？如果没有,还有其他想法吗？
推荐指数
解决办法
查看次数
d3 沿路径动画箭头
我创建了一个我的问题块 http://bl.ocks.org/Mbrownshoes/5e36771400038b0c861c6617c622c5f7
我想让箭头在移动时沿着路径动画。目前我正在使用 .attr("marker-end"..) 添加箭头，但毫不奇怪，它将箭头添加到结束位置，而不是移动结束位置。有几个示例将单个箭头移动到一条很长的路径上（http://bl.ocks.org/dem42/e10e933990ee662c9cbd）但是我如何让所有这些箭头沿着所有这些路径移动？
route_path = g.selectAll(".route")
// .data(migration.filter(function(d) {
// return d.Province != 'International';
// }))
.data(migration)
.enter()
.append("path")
.attr("class", "route")
.attr('d', function(d, i) {
line_data.forEach(function(j) {
// console.log(ii)
if (j.prov.PRENAME == d.Province) {
d.coords = j.coords
}
if (d.Province == 'International') {
d.coords = [-139.75635246400601, 53.75809690349844]
}
})
// console.log(d)
d.net = Number(d.Origin) - Number(d.Destination)
// define the location for arrow to start/end in bc here
bc_coords = [-122.75635246400601, 54.75809690349844];
if (d.Province == 'Nunavut') { …推荐指数
解决办法
查看次数
如何将海洋形状文件转换为topojson
我在我的MacOs 10.7.5上安装了gdal 1.10.1和topojson 1.4.0.我已经下载了ne_110m_ocean表格Natural Earth.
我成功地在GeoJSON中转换了形状文件:
ogr2ogr \
-f GeoJSON \
ocean.json \
ne_110m_ocean.shp
然后我将GeoJSON转换为topojson:
topojson \
-o ocean_tj.json \
ocean=ocean.json \
当我使用GeoJSON文件绘图时,一切正常.
d3.json("ocean.json", function(json) {
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "steelblue");
});
当我使用topojson文件绘图时,我得到了土地的多边形而不是海洋的多边形!
d3.json("ocean_tj.json", function(topology) {
var ocean = topojson.feature(topology, topology.objects.ocean);
svg.append("path")
.datum(ocean)
.attr("d", path)
.style("fill", "red");
});
有人可以帮忙吗？
提前致谢
推荐指数
解决办法
查看次数
投射topojson的方法？
给定shapefile:
鉴于我们想重新投影D3js数据,我们可以在不同级别重新投影.
1.获取重新投影的shapefile(1),使用ogr2ogr:
ogr2ogr -f 'ESRI Shapefile' -t_srs 'EPSG:...' output.shp input.shp
或者2.使用(npm)得到一个重新投影的topojson(2)topojson.js:
topojson \
-o output.topo.json
--projection 'd3.geo.albersUsa()' \
-q 1e5 \
-s 1 \
-- input.shp
或3.获得重新投影的D3js数据/ SVG(1),D3js代码包括:
var path = d3.geo.path()
.projection(d3.geo.albersUsa()) // unsure of this syntaxe, confirmation welcome, just delete this comment.
概述:
Mike Bostock>预计Topojson告诉我们,第一和第二种方式"消除了在渲染时投射几何体的需要,提高了性能[...]因为每个点的重要性是在屏幕上而不是在地球表面上测量的".简而言之,最终像素质量/文件重量比更好.
另一方面,在渲染时重新投影几何体允许更灵活的最后一分钟投影.
了解更多？
这就是我所知道的.如果有人可以解释这些方法的更多信息,分享帮助资源的参数(ogr的EPSG列表,d3js预测列表),以及各自的各自的好处/弱点,它可能是一个非常有趣的并行手册.
注意:我会给出我的答案,但我只是开始挖掘它.我想周围有更多有经验的人.
推荐指数
解决办法
查看次数