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根據點擊事件

回答

相關問題