标签: topojson
路径未在d3.js topoJson图中显示
我正在尝试使用topoJson绘制地图,所以我按照这个例子
但我没有得到任何东西.
这是我写的
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
path {
fill: #ccc;
stroke: #fff;
stroke-width: .5px;
}
path:hover {
fill: red;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("tunisia.json", function(error, topology) {
console.log(topology);
svg.selectAll("path")
.data(topojson.feature(topology, topology.objects.governorates).features)
.enter().append("path")
.attr("d", path);
});
</script>
</body>
</html>
经过一些调试后发现我的案例中的路径添加如下:
<svg width="960" height="500">
<path></path>
<path></path>
</svg>
而它通常应该是这样的:
<svg width="960" height="500">
<path d="M183.85631949544694,17.16574961388676L184.64695256075555,18.261986556132797L184.24437929962187,21.436416964644536L184.9109502450185,22.72190753660925L183.42733139583214,23.600229178621248L181.43637647772152,23.38526266060535L162.4858998398068,18.04698631290296L162.95134674943927,16.322885588815097L161.24381018256219,15.20848145955324L160.04585728433227,11.701769628478132L161.0879861841512,10.793553936506555L172.9773901748378,14.256236175137701Z"></path>
</svg> …推荐指数
解决办法
查看次数
topojson脆皮边缘？
Mike Bostock分享了一系列全球topojson文件.
由于我想要更多的数据和更高的质量,我现在从Natural Earth生成我自己的高质量topojson文件.为简单起见,我的makefile /命令是这样的:
admin_0: crop
../node_modules/topojson/bin/topojson \
--id-property name \
-p name=name \
-q 1e4 \
--filter=small \
-o admin_0.topo.json \
-- admin_0=./natural_earth_vector/10m_cultural/ne_10m_admin_0_countries.shp
但我的3MB .topojson是脆的,讨厌的,图形凌乱.看看海岸线,你会看到最烦人的事情:看起来像"楼梯"的线条:水平,垂直,水平,垂直,......
在他身边,M. Bostock的90kb .topojson在优雅方面做得非常好.不完美,但很好,他确实有对角线(!)和他的线条使用的各种角度.
我尝试减少量化-q 1e3,但它保持松脆,而且更加难看:楼梯的台阶甚至更大.
从命令行API,我注意到,读尽我所能在:
- -q, - 量化, - 无量化沿任一维度的可微分点的最大数量
- -s, - 简化Visvalingam简化的精度阈值
- - 简化维持Visvalingam简化的点数比例
- --width scale和translate以适合指定宽度的视口
- - 高度缩放和平移以适合指定高度的视口
这可能都对我有帮助.我做了一些测试,主要是了解平衡简化是棘手的.我想请经验丰富的用户如何处理和平衡他们的topojson简化.
你自己采取什么方法？所以... 我应该使用什么topojson参数来使我的topojson更好？(没有酥脆的楼梯 - 台阶边缘,正确的忠诚形状)
推荐指数
解决办法
查看次数
topojson中merge/mesh和mergeArcs/meshArcs有什么区别？
在维基说:
等效于
topojson.merge/.mesh,但返回TopoJSON MultiPolygon/MultiLineString对象而不是GeoJSON.
但是这是什么意思？返回的TopoJSON MultiPolygon/MultiLineString对象的一个很好的用法示例是什么？我试图替换:
topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })
......用:
topojson.meshArcs(world, world.objects.countries, function(a, b) { return a !== b; })
...但得到了错误Uncaught TypeError: Cannot read property 'length' of undefined的d3.js.
推荐指数
解决办法
查看次数
"笔划dasharray:X,Y;" 乱搞svg路径？(铬)
作品
我通过d3js生成svg路径.要么data()+ mesh()或datum()+ mesh()工作.
svg.append("g").attr("id","border")
.attr("style", "fill: none; stroke:#646464;")
.selectAll("path")
.data([topojson.mesh(json, L0, function(a, b) { return a !== b; })])
.enter().append("path")
.attr("d", path);
要么 :
//inland borders lines
svg.append("g").attr("id","coast")
.attr("style", "fill: none; stroke:#646464;")
.append("path")
.datum(topojson.mesh(json, json.objects.admin_0, function(a,b){return a===b;}))
.attr("d", path);
休息
将stroke-dasharray: 8,4结果添加到:
将其更改stroke-dasharray: 6,3,3,3为:
出现了一些文物,一半的笔画丢失/不可见(与Ind/Pakistan,Ind/Nepal,Ind/Myamar,Myamar/Cambodia的边界).如果我在海岸线生成中添加类似的笔划 - 达哈哈,那么同样的混乱会出现蓝线.
编辑:好的.首先,我因为topojson.mesh()总是返回一个MultiLineString而被捣乱,因为它反过来会生成一个路径.但为什么"dasharray:none"工作正常呢？
任何的想法 ？我认为这些dasharray使路径的一部分没有关闭.(检查正在进行中).
推荐指数
解决办法
查看次数
半径以英里为单位的 D3 Topojson 圆
（假设现有投影/topojson）
我想要做的是在半径 (r) 以英里为单位的点 ([long,lat]) 处创建一个圆。我知道有一个 d3.geo 函数，但经过一些考虑，我认为它不会与我的特定应用程序非常兼容。
所以现在我正在寻找使用原生 svgcircle解决方案，其中 cx 和 cy 是纬度和经度，而 r 是以英里为单位的半径。我知道 cx 和 cy，但我不知道如何确保 r 是 15 英里。所以主要的是如何确保在像素空间中绘制半径时以英里为单位进行缩放。必须有某种方式使用该projection函数为半径设置适当的比例。但我没有在实践中看到这一点。
另外我应该指出，我的投影是动态的，取决于投影（包括比例）可以改变的用户事件。所以我不确定这是否会影响在现有投影的背景下如何缩放圆圈，但我想我会公开这一点，以确保安全。
推荐指数
解决办法
查看次数
D3.js - 从版本2中的path.area更改为版本4
我正在尝试更新d3-cartogram以使用D3.js版本4.到目前为止,一切都很顺利 - 我刚刚更新了所有函数,以便它们被编写在版本4的扁平命名空间中.例如而不是d3.geo.path(),它d3.geoPath().我还更改了一些小东西,以便代码可以使用最新版本的TopoJSON.例如,而不是topojson.object(topology, geom).coordinates,它是topojson.feature(topology, geom).geometry.coordinates.
但我遇到了一个似乎无法解决的问题.该文件cartogram.js有一行读取var areas = objects.map(path.area),其中objects是TopoJSON功能的集合.path.area在D3.js版本2和4中是不同的,我似乎无法调和它们.如果我控制台在每个版本中记录它,它看起来像这样:
- 版本2:
function (n){return n&&e.hasOwnProperty(n.type)?e[n.type](n):t} - 第4版:
function (t){return U_(t,r(Ag)),Ag.result()}
在版本4中,它记录错误:Uncaught TypeError: r is not a function.当然,我已经用Google搜索了错误以及我正在尝试做的各种描述,但我没有运气.在此先感谢您的帮助.
推荐指数
解决办法
查看次数
如何解决 topojson 包的打字稿错误？
请原谅这个幼稚的问题；我是打字稿的新手。在 javascript 中，我可以使用topojson.mesh创建一个像这样的网格对象：
import us from "./counties-albers-10m.json"
topojson.mesh(us, us.objects.states, (a, b) => a !== b))
当我尝试在 Typescript 中执行此操作时，我收到此警告：
Types of property 'type' are incompatible. Type 'string' is not assignable to type "Topology" TS2345
我也@types/topojson安装了。谁能帮我调试一下？我对打字稿的了解不够，无法理解问题所在。
更广泛地说，如何调试这样的错误？我发现 3rd 方包存在各种类型问题，并且在许多情况下不知道如何为我的 javascript 对象分配正确的类型。谢谢您的帮助。
推荐指数
解决办法
查看次数
动态投影单个县
这是一个简单但鼓舞人心的单一状态的 topojson：
https://bl.ocks.org/mbostock/7061976
它由来自仅包含该状态的 json 数据绘制，如下所示：
d3.json("va-counties.json", function(error, topo) {
if (error) throw error;
我想做的是动态投影一个县。假设有一个键盘事件或运行这样一个函数的东西：读入解析的数据，找到县 id，并返回仅该县的 topojson 特征。上述块和我的情况之间的区别在于，我的 json 文件将包含美国的所有县，但我一次只需要 1 个县。有没有办法在 D3 中实现这一目标？
就像一个简单的试金石，对于县 id=1000，我尝试了：
var current_county = topojson.feature(topo, topo.objects.counties).filter(function(d) { return d.id=1000;})),
bounds = path.bounds(county);
然而，无论我多么努力地处理它，我总是不断地出现错误。或者它会停止抛出错误，但仍然不能“工作”。也许.filter()不是这项工作的最佳工具？还有哪些意见？
感谢您阅读
推荐指数
解决办法
查看次数
标签 统计
topojson ×8
d3.js ×6
javascript ×5
maps ×2
svg ×2
cartogram ×1
chromium ×1
geojson ×1
typescript ×1