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

任何想法？

来源

2017-10-15 Fede9390

该解决方案应该可以帮助您从阵列中的每个对象获取其自己的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"]

来源

2017-10-15 18:20:14 Nick

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

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

来源

2017-10-16 07:57:05 Fede9390

D3 V4：确定从以GeoJSON根据点击事件

回答

相关问题