javascript - 使用 d3.js 隐藏 map 中的市镇线

Question

我有部门(红线)和市镇(灰线)的划分。我希望我的 map 隐藏市政当局的线条，以便稍后使用按钮显示或消失这些线条。不透明度: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)。不过，有多种方法可以实现该效果，例如 .style("lines-width",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()
    	.scale(2000)
    	.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))
    .attr("d", path)
    .attr("class", "depto-borde");
  /*    svg.selectAll(".dept-label")
  .data(topojson.feature(co, co.objects.depts).features)
  	.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() {
	d3.selectAll(".mpio")
    .transition()
    .style("opacity",0)
    .duration(1000);
}

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

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

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

var show = true;

function showcase() {
	setTimeout(function() {
    show = !show;
		if (show) { fadein();fatten(); }
		else { fadeout(); diet(); }
		showcase();
	}, 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>