在地圖中使用d3.js隱藏城市的線路

Question

我有一個部門（紅線）和城市（灰色線）部門。我希望我的地圖隱藏城市的線路，以便稍後使用按鈕顯示或消失這些線條。不透明度：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"); 

http://jsfiddle.net/vstn1oaf/

Answer 1

可以修改不透明度，但是，我假設你與.attr("opacity",0)這樣做。這在您定義CSS中的不透明度時不起作用。 CSS超過.attr。請使用.style("opacity",0)。雖然有多種方法可以達到效果，例如。

顯示整個網格，而不僅僅是內部的界限，你可以使用：

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

下面是這一切的工作：

var width = 900, 
 
    height = 900; 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
/* 
 
ogr2ogr -f GeoJSON depts.json depto.shp -s_srs EPSG:26986 -t_srs EPSG:4326 
 
topojson --id-property NOMBRE_DPT -p name=NOMBRE_DPT -p name -o colombia-departamentos.json depts.json 
 
*/ 
 

 
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() 
 
    \t .scale(2000) 
 
    \t .translate([width/2, height/2]) 
 
    \t .center([-61,43]) 
 
    \t .rotate([2,3,2]); 
 
\t var path = d3.geo.path() 
 
\t \t .projection(projection); 
 
\t svg.append("path") 
 
\t \t .datum(subunits) 
 
\t \t .attr("d", path); 
 
\t svg.selectAll(".mpio") 
 
\t  .data(topojson.feature(co, co.objects.mpios).features) 
 
    \t \t .enter().append("path") 
 
    \t .attr("class", function(d) { return "mpio " + "_" + d.id; }) 
 
    \t .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)) 
 
    .attr("d", path) 
 
    .attr("class", "depto-borde"); 
 
    /* svg.selectAll(".dept-label") 
 
    .data(topojson.feature(co, co.objects.depts).features) 
 
    \t .enter().append("text") 
 
    .attr("class", function(d) { return "dept-label " + d.id; }) 
 
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) 
 
    .attr("dy", ".35em") 
 
    .text(function(d) { return d.properties.name; });*/ 
 
}); 
 

 
function fadeout() { 
 
\t d3.selectAll(".mpio") 
 
    .transition() 
 
    .style("opacity",0) 
 
    .duration(1000); 
 
} 
 

 
function fadein() { 
 
\t d3.selectAll(".mpio") 
 
    .transition() 
 
    .style("opacity",1) 
 
    .duration(1000); 
 
} 
 

 
function fatten() { 
 
\t d3.selectAll(".depto-borde") 
 
    .transition() 
 
    .style("stroke-width",2) 
 
    .duration(1000); 
 
} 
 

 
function diet() { 
 
\t d3.selectAll(".depto-borde") 
 
    .transition() 
 
    .style("stroke-width",0) 
 
    .duration(1000); 
 
} 
 

 
var show = true; 
 

 
function showcase() { 
 
\t setTimeout(function() { 
 
    show = !show; 
 
\t \t if (show) { fadein();fatten(); } 
 
\t \t else { fadeout(); diet(); } 
 
\t \t showcase(); 
 
\t }, 1500) 
 
} 
 

 
showcase();

/*.mpio._44279 { fill: #fff; }*/ 
 

 
path { 
 
    fill: #777; 
 
} 
 

 
.mpio { 
 
    fill: none; 
 
    stroke: #fff; 
 
    stroke-opacity: .25; 
 
    stroke-width: .5px; 
 
    pointer-events: none; 
 
} 
 

 

 

 
.mpio-borde { 
 
    opacity: 0; 
 
    fill: none; 
 
    stroke: #00ff00; 
 
    __stroke-linejoin: round; 
 
    stroke-width: 0.5;} 
 
.depto-borde { 
 
    fill: none; 
 
    stroke: #ff0000; 
 
    stroke-linejoin: round; 
 
    stroke-width: 1; 
 
    opacity: 1; 
 

 
}

<script src="https://d3js.org/d3.v3.min.js"> </script> 
 
<script src="https://d3js.org/topojson.v1.min.js"></script>