D3.js 根据节点名称从GeoJSON中选择功能
我正在使用D3js进行地理数据可视化,其中包括部队布局和传单地图。在其他用户的帮助下,我已经能够构建第一个版本。现在我添加了一个geojson路径,我想根据我单击的节点的名称显示一个特定的功能,但是现在当我单击一个节点时,所有的路径都会显示出来 这就是我想要的: 这就是我所拥有的: 我尝试在我单击节点时调用的函数中迭代路径名:D3.js 根据节点名称从GeoJSON中选择功能,d3.js,leaflet,geojson,D3.js,Leaflet,Geojson,我正在使用D3js进行地理数据可视化,其中包括部队布局和传单地图。在其他用户的帮助下,我已经能够构建第一个版本。现在我添加了一个geojson路径,我想根据我单击的节点的名称显示一个特定的功能,但是现在当我单击一个节点时,所有的路径都会显示出来 这就是我想要的: 这就是我所拥有的: 我尝试在我单击节点时调用的函数中迭代路径名: function connectedNodes() { var poligono = g.selectAll("path"); var
function connectedNodes() {
var poligono = g.selectAll("path");
var result = datosPoli.features;
for (var i = 0; i < result.length; i++) {
var poligonoNombre = result[i].properties.Name;
}
if (toggle == 0) {
//Reduce the opacity of all but the neighbouring nodes
d = d3.select(this.parentNode).datum();
r = d3.select(this).datum();
nodesAll
.transition()
.style("opacity", function (o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0;
})
;
lineas
.transition()
.style("opacity", function (o) {
return d.index==o.source.index | d.index==o.target.index ? 0.5 : 0;
})
;
poligono
.filter(function(d){
for (var i = 0; i < result.length; i++) {
var poligonoNombre = result[i].properties.Name;
return poligonoNombre;
}
return d.id === poligonoNombre;
})
.attr('fill-opacity', 1)
;
text
.transition()
.style('opacity', function(o){
return neighboring(d, o) | neighboring(o, d) ? 1 : 0;
})
toggle = 1;
} else {
// devuelve los nodos a la normalidadlos links invisibles
nodesAll
.transition()
.style("opacity", 1)
;
lineas
.transition()
.style("opacity", 0)
;
poligono
.attr("fill-opacity", 0)
;
text
.transition()
.style('opacity', 1)
;
toggle = 0;
}
}
但是没有运气
将完整代码上载到blockbuilder时遇到问题,因此我将其上载到此处:以下是更好的多边形检查,但在多边形名称中似乎找不到图例中的任何名称 如果要绘制多边形,最好更改不透明度。同时更改创建红色多边形的位置 还是一艘班轮
poligono.attr('opacity', o => d.id === o.properties.Name ? 1 : 0);
我查了每个名字,都是一样的。它似乎适用于geojson文件的第一个名称,因为当我单击同名的节点时,该功能确实会出现,但id不适用于其他功能。实际上,每当我单击geojson文件中有名称的节点时,它就会出现。@PierrePuentes更改了该函数。我点击了外圆,但你需要点击地图圆圈是的!,完美作品:。非常感谢你。
poligono.attr('opacity', o => d.id === o.properties.Name ? 1 : 0);