Question

{
"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]
                ]
            ] } }
   ]
}

上面是geoJson文件的摘录，其中包含有关如何在页面上绘制某些路径的geometry数据。每条路径还有properties描述路径的特征（例如prop1，prop2和prop3。

在我的页面中还有一个链接列表，每个链接都有一个id属性，该属性对应于geoJson文件中的一个属性。

<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
    })
})

有什么想法吗？

Answer 1

此解决方案应该可以帮助您从自己的{ "name": "re-server", "version": "0.1.0", "bsc-flags": ["-bs-super-errors"], "package-specs" : [{ "module": "commonjs", "in-source": true }], "sources": [{ "dir": "src" } ], "bs-dependencies" : [ "bs-express" ] }数组中获取数组中每个对象的属性。

properties

Answer 2

我设法自己找到一个不同的解决方案，我将其发布仅供参考。

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()
})

D3 v4：根据点击事件

2 个答案: