如何解决如何访问GeoJson数据中的文本元素?
我正在使用d3.js和vue js构建一个Webapp。目的是使用GeoJson数据创建平面图。我想在平面布置图中添加文本以标记房间/走廊。这有可能吗?我尝试做
console.log(data.features.properties.name)
先记录数据,但这不起作用。我知道了
TypeError: Cannot read property 'name' of undefined
错误。
我已经包含了GeoJson数据和我的代码。谢谢您的帮助,我对这些东西还很陌生,所以有什么帮助。
{
"type": "FeatureCollection","features": [
{
"type": "Feature","properties": {},"geometry": {
"type": "Polygon","coordinates": [
[
[
-131.484375,-60.93043220292333
],[
-131.48712158203125,-61.938950426660604
],[
-129.375,[
-129.37225341796875,[
-130.07537841796875,-60.9290976898192
],[
-130.4296875,-60.759159502269895
],[
-131.1328125,[
-131.484375,-60.93043220292333
]
]
]
}
},{
"type": "Feature","properties": {
"stroke": "#555555","stroke-width": 2,"stroke-opacity": 1,"fill": "#555555","fill-opacity": 0.5,"name": "Kitchen"
},"coordinates": [
[
[
-131.1328125,-60.92976495336046
],-61.270232790000605
],[
-130.07675170898438,-61.27089289540995
],[
-130.42831420898438,-60.759159502269895
]
]
]
}
},"name": "Living Room"
},"coordinates": [
[
[
-131.4898681640625,-61.94024242472969
],[
-130.078125,-61.60639637138627
],[
-131.4898681640625,-61.94024242472969
]
]
]
}
},"name": "Front Door"
},"coordinates": [
[
[
-129.40486907958984,-61.92538114682588
],[
-129.34547424316406,-61.78724662364391
],[
-129.40486907958984,-61.92538114682588
]
]
]
}
},"fill-opacity": 0.5
},"coordinates": [
[
[
-130.89866638183594,-61.2847519044403
],[
-130.66280364990234,-61.25521164335227
],[
-130.89866638183594,-61.2847519044403
]
]
]
}
},"coordinates": [
[
[
-130.10765075683594,-61.84286677003186
],[
-130.04825592041016,-61.74501840587376
],[
-130.10765075683594,-61.84286677003186
]
]
]
}
},"coordinates": [
[
[
-131.13418579101562,-61.6351166115343
],-61.576995825326016
],[
-131.13418579101562,-61.6351166115343
]
]
]
}
},"name": "Bathroom"
},"coordinates": [
[
[
-130.07675170898438,-61.27155298694534
],[
-129.3695068359375,-61.27155298694534
]
]
]
}
},"coordinates": [
[
[
-129.90509033203125,-61.284092090340835
],[
-129.54254150390625,-61.253725645140406
],[
-129.90509033203125,-61.284092090340835
]
]
]
}
}
]
}
createFloormap(){
d3.json("../static/data.json").then(function(data){
let self = this
var svg = d3.select("svg")
var width = +svg.attr("width")
var height = +svg.attr("height")
svg.attr("transform","translate(" + width/2 + ",0)")
var projection = d3.geoIdentity().fitSize([width,height],data)
var path = d3.geoPath(projection)
console.log(data.features.properties.name)
svg.selectAll("path")
.data(data.features)
.enter()
.append("path")
//.attr("id",data.features.properties)
.attr("d",path)
.attr("fill","white")
.attr("stroke","black")
.attr("stroke-width",1.5)
})
}
解决方法
您的错误是您尝试访问 set of 功能的属性,而不是单个功能的属性。要访问这些内容,请尝试使用console.log(data.features.map((f) => f.properties.name))
。它将记录一系列功能。
要将名称放置在SVG上,请执行以下操作(我无法对其进行测试)
createFloormap(){
d3.json("../static/data.json").then(function(data){
let self = this
var svg = d3.select("svg")
var width = +svg.attr("width")
var height = +svg.attr("height")
svg.attr("transform","translate(" + width/2 + ",0)")
var projection = d3.geoIdentity().fitSize([width,height],data)
var path = d3.geoPath(projection)
console.log(data.features.map((f) => f.properties.name));
var paths = svg.selectAll("path")
.data(data.features);
paths
.enter()
.append("path")
// do this to merge the new `.enter()`-ed collection
// with the pre-existing set of `paths` if you use d3
// version 4+. See the docs and `https://medium.com/@bryony_17728/d3-js-merge-in-depth-a3069749a84f`
// for details.
.merge(path)
.attr("id",(d) => d.properties.name)
.attr("d",path)
.attr("fill","white")
.attr("stroke","black")
.attr("stroke-width",1.5);
// Now for the new part
var labels = svg.selectAll(".label")
.data(data.features);
labels.enter()
.append("text")
.attr("class","label)
.merge(labels)
.text((d) => d.properties.name)
// This should return the centroid of the shape,see `https://github.com/d3/d3-geo#path_centroid`
.attr('x',path.centroid.x)
.attr('y',path.centroid.y);
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。