D3 V4:确定从以GeoJSON根据点击事件
问题描述:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 1, "prop1": "val1", "prop2": "val2", "prop3": "val3" }, "geometry": { "type": "Polygon", "coordinates": [
[
[168.77944820788511, 672.173755174731468],
[278.300419534049979, 672.173755174731468],
[278.300419534049979, 590.815319332437525],
[168.77944820788511, 590.815319332437525],
[168.77944820788511, 672.173755174731468]
]
] } },
{ "type": "Feature", "properties": { "id": 2, "prop1": "val1", "prop2": "val2", "prop3": "val3" }, "geometry": { "type": "Polygon", "coordinates": [
[
[282.211882795699466, 672.369328337813613],
[334.625490501792683, 672.369328337813613],
[334.625490501792683, 591.01089249551967],
[282.211882795699466, 591.01089249551967],
[282.211882795699466, 672.369328337813613]
]
] } }
]
}
上述提取其属性是包含有关如何在页面上画一些路径geometry
数据的GeoJSON的文件的摘录。每个通道还具有路径的properties
描述特性(例如prop1
,prop2
和prop3
。D3 V4:确定从以GeoJSON根据点击事件
在我的网页上还有一个链接列表,每一个都具有对应于GeoJSON内容之一的id
属性。文件
<ul>
<li id="prop1"><a href="#">Link1</a></li>
<li id="prop2"><a href="#">Link2</a></li>
<li id="prop3"><a href="#">Link3</a></li>
</ul>
我想什么我的代码做:
- 当链接用户点击提取其
id
[1] - 使用该
id
以提取相应属性的值以GeoJSON [2] - 使用该值的属性
status
分配给路径,我将在以后使用样式的路径[3]
我被困在第二点,因为我不能根据提取的id
来定义应提取哪个属性)。
//OPTION 1
d3.select('#myList').selectAll('li').on('click', function() {
propPicked = this.id
propPicked = 'd.properties.' + propPicked //[1]
d3.selectAll('path').each(function (d) {
d3.select(this).attr('status'. function (d) { //[3]
return propPicked //[2] this is where I am stuck
})
})
//OPTION 2
d3.select('#myList').selectAll('li').on('click', function() {
propPicked = this.id //[1]
d3.selectAll('path').each(function (d) {
d3.select(this).attr('status'. function (d) { //[3]
return d.properties[propPicked] //[2] this is where I am stuck
})
})
任何想法?
答
该解决方案应该可以帮助您从阵列中的每个对象获取其自己的properties
阵列的属性。
var selectedProperties = [];
d3.select('#myList').selectAll('li').on('click', function() {
var propPicked = this.id; // e.g., "prop1"
d3.selectAll('path').each(function (d) {
d3.select(this).attr('status'. function (d) {
selectedProperties.push(d.properties[propPicked]);
})
})
console.log(selectedProperties); // ["val1", "val1"]
答
我设法得到了一个不同的解决方案,我将其发布,仅供参考。
d3.select('#myList').selectAll('li').on('click', function() {
//extract selected property from button
propPicked = this.id;
//extract rooms status for that period
d3.selectAll('path').attr('status', function (d) {
return d.properties[propPicked];
});
nextFunction()
})