Javascript 使用d3.js在地图中隐藏市政线

我有一个部门（红线）和市政部门（灰线）。我希望我的地图隐藏各市的线条，以便以后使用按钮显示或消失这些线条。不透明度：0不起作用。我想实现的另一件事是绘制红色部门，这包括当前未绘制的外部线条，我指的是轮廓图的线条

  d3.json("https://cdn.rawgit.com/finiterank/mapa-colombia-js/9ae3e4e6/colombia-municipios.json", function(error, co) {
      var subunits = topojson.feature(co, co.objects.mpios);
      var projection = d3.geo.mercator()
        .scale(1000)
        .translate([width / 2, height / 2])
        .center([-61,43])
        .rotate([2,3,2]);
    var path = d3.geo.path()
      .projection(projection);
    svg.append("path")
      .datum(subunits)
      .attr("d", path);
    svg.selectAll(".mpio")
        .data(topojson.feature(co, co.objects.mpios).features)
        .enter().append("path")
        .attr("class", function(d) { return "mpio " + "_" + d.id; })
        .attr("d", path);
      svg.append("path")
      .datum(topojson.mesh(co, co.objects.mpios, function(a, b) { return a !== b; }))
      .attr("d", path)
      .attr("class", "mpio-borde");
      svg.append("path")
      .datum(topojson.mesh(co, co.objects.depts, function(a, b) { return a !== b; }))
      .attr("d", path)
      .attr("class", "depto-borde");

---

您可以修改不透明度，但是，我假设您是使用

.attr（“不透明度”，0）

执行此操作的。在css中定义不透明度时，这将不起作用。CSS的排名高于

.attr

。改为使用

.style（“不透明”，0）

。但是，有多种方法可以实现这种效果，例如

.style（“笔划宽度”，0）

要显示整个网格，而不仅仅是内部边界，可以使用：

.datum(topojson.mesh(co, co.objects.depts))

以下是所有的工作：

var宽度=900，
高度=900；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
/* 
ogr2ogr-f GeoJSON depts.json depto.shp-s_srs EPSG:26986-t_srs EPSG:4326
topojson--id属性NOMBRE_DPT-p name=NOMBRE_DPT-p name-o columbia-departmentos.json depts.json
*/
d3.json（“https://cdn.rawgit.com/finiterank/mapa-colombia-js/9ae3e4e6/colombia-municipios.json，函数（错误，co）{
var subunits=topojson.feature（co，co.objects.mpios）；
var projection=d3.geo.mercator（）
.比额表（2000年）
.translate（[宽度/2，高度/2]）
.center（[-61,43]）
.旋转（[2,3,2]）；
var path=d3.geo.path（）
.投影（投影）；
追加（“路径”）
.数据（子单元）
.attr（“d”，路径）；
svg.selectAll（“.mpio”）
.data（topojson.feature（co，co.objects.mpios.features）
.enter（）.append（“路径”）
.attr（“类”，函数（d）{返回“mpio”+“”+d.id；}）
.attr（“d”，路径）；
追加（“路径”）
.datum（topojson.mesh（co，co.objects.mpios，函数（a，b）{返回a！==b；}））
.attr（“d”，路径）
.attr（“类”、“mpio borde”）；
追加（“路径”）
.datum（topojson.mesh（co，co.objects.depts））
.attr（“d”，路径）
.attr（“类”、“德普托博德”）；
/*svg.selectAll（“.dept标签”）
.data（topojson.feature（co，co.objects.depts）.features）
.enter（）.append（“文本”）
.attr（“类”，函数（d）{return“dept label”+d.id；}）
.attr（“transform”，函数（d）{return”translate（“+path.centroid（d）+”）；}）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.properties.name；}）*/
});
函数衰减（）{
d3.选择全部（“.mpio”）
.transition（）
.style（“不透明度”，0）
.持续时间（1000）；
}
函数fadein（）{
d3.选择全部（“.mpio”）
.transition（）
.style（“不透明度”，1）
.持续时间（1000）；
}
功能性脂肪{
d3.全选（“.depto borde”）
.transition（）
.样式（“笔划宽度”，2）
.持续时间（1000）；
}
功能性饮食{
d3.全选（“.depto borde”）
.transition（）
.style（“笔划宽度”，0）
.持续时间（1000）；
}
var show=true；
函数showcase（）{
setTimeout（函数（）{
show=！show；
如果（显示）{fadein（）；fatten（）；}
else{fadeout（）；diet（）；}
showcase（）；
}, 1500)
}
showcase（）
/*.mpio._44279{fill:#fff；}*/
路径{
填充：#777；
}
mpio先生{
填充：无；
冲程：#fff；
笔画不透明度：.25；
笔划宽度：.5px；
指针事件：无；
}
姆皮奥·博尔德先生{
不透明度：0；
填充：无；
行程：#00ff00；
__笔划线条连接：圆形；
笔划宽度：0.5；}
德普托·博尔德先生{
填充：无；
行程：#ff0000；
笔划线条连接：圆形；
笔画宽度：1；
不透明度：1；
}
您可以修改不透明度，但是，我假设您是使用
.attr（“不透明度”，0）
执行此操作的。在css中定义不透明度时，这将不起作用。CSS的排名高于
.attr
。改为使用
.style（“不透明”，0）
。但是，有多种方法可以实现这种效果，例如
.style（“笔划宽度”，0）

要显示整个网格，而不仅仅是内部边界，可以使用：

.datum(topojson.mesh(co, co.objects.depts))

以下是所有的工作：


var宽度=900，
高度=900；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
/* 
ogr2ogr-f GeoJSON depts.json depto.shp-s_srs EPSG:26986-t_srs EPSG:4326
topojson--id属性NOMBRE_DPT-p name=NOMBRE_DPT-p name-o columbia-departmentos.json depts.json
*/
d3.json（“https://cdn.rawgit.com/finiterank/mapa-colombia-js/9ae3e4e6/colombia-municipios.json，函数（错误，co）{
var subunits=topojson.feature（co，co.objects.mpios）；
var projection=d3.geo.mercator（）
.比额表（2000年）
.translate（[宽度/2，高度/2]）
.center（[-61,43]）
.旋转（[2,3,2]）；
var path=d3.geo.path（）
.投影（投影）；
追加（“路径”）
.数据（子单元）
.attr（“d”，路径）；
svg.selectAll（“.mpio”）
.data（topojson.feature（co，co.objects.mpios.features）
.enter（）.append（“路径”）
.attr（“类”，函数（d）{返回“mpio”+“”+d.id；}）
.attr（“d”，路径）；
追加（“路径”）
.datum（topojson.mesh（co，co.objects.mpios，函数（a，b）{返回a！==b；}））
.attr（“d”，路径）
.attr（“类”、“mpio borde”）；
追加（“路径”）
.datum（topojson.mesh（co，co.objects.depts））
.attr（“d”，路径）
.attr（“类”、“德普托博德”）；
/*svg.selectAll（“.dept标签”）
.data（topojson.feature（co，co.objects.depts）.features）
.enter（）.append（“文本”）
.attr（“类”，函数（d）{return“dept label”+d.id；}）
.attr（“transform”，函数（d）{return”translate（“+path.centroid（d）+”）；}）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.properties.name；}）*/
});
函数衰减（）{
d3.选择全部（“.mpio”）
.transition（）
.style（“不透明度”，0）
.持续时间（1000）；
}
函数fadein（）{
d3.选择全部（“.mpio”）
.transition（）
.style（“不透明度”，1）
.持续时间（1000）；
}
功能性脂肪{
d3.全选（“.depto borde”）
.transition（）
.样式（“笔划宽度”，2）
.持续时间（1000）；
}
功能性饮食