如何解决如何在d3.js中弯曲Geo Path
我正在尝试从geojson数据绘制一个楼层地图。现在,通过从geojson.io生成数据,它可以完美地工作。我想通过制作弯曲的走廊和可能的圆形房间(在将来)来扩大规模。我注意到在geojson数据中不可能有弧和圆,因此我在考虑使用d3.js路径,然后在该路径上应用曲线。我发现您不能在geoPath上使用curveLinear,curveStep,curveBasis。甚至可以弯曲geoPath?谢谢您的帮助
GeoJson数据
{
"type": "FeatureCollection","features": [
{
"type": "Feature","properties": {},"geometry": {
"type": "Polygon","coordinates": [
[
[
19.335937499999996,52.26815737376817
],[
35.68359375,60.19615576604439
],[
19.335937499999996,52.26815737376817
]
]
]
}
},{
"type": "Feature","coordinates": [
[
[
35.595703125,57.89149735271034
],[
35.595703125,54.57206165565852
],[
51.591796875,54.316523240258256
],[
56.51367187499999,52.696361078274485
],[
55.810546875,41.178653972331674
],[
65.91796875,41.50857729743935
],[
64.951171875,53.067626642387374
],[
52.91015625,57.844750992891
],57.89149735271034
]
]
]
}
},"coordinates": [
[
[
43.06640625,21.69826549685252
],[
78.75,41.64007838467894
],[
43.06640625,21.69826549685252
]
]
]
}
}
]
}
我的代码
d3.json("../static/data.json").then(function(data){
var svg = d3.select("svg")
var width = +svg.attr("width")
var height = +svg.attr("height")
var projection = d3.geoIdentity().fitSize([width,height],data)
var path = d3.geoPath(projection)
svg.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d",path)
.attr("fill","white")
.attr("stroke","black")
.attr("stroke-width",1.5)
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。