在d3.js中绘制公寓和城镇的不同颜色

Question

I have a map, departments and municipalities. The departments are delimited by the red lines. I want when I mouse over the municipality, in addition to painting this municipality, also painted the department of another color.

  var width = 900,
      height = 900;

  var div = d3.select("body").append("div")   
    .attr("class", "tooltip")             
    .style("opacity", 0);

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

  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);


   //departments
    svg.selectAll(".dpto")
      .data(topojson.feature(co, co.objects.depts).features)
      .enter().append("path")
      .on('mouseover', mouseoverDep )
      .on('mouseout',mouseoutDep)
      .attr("class", function(d) { return "depts " + "_" + d.id; })
      .attr("d", path)

    svg.append("path")
      .datum(topojson.mesh(co, co.objects.depts, function(a, b) { return true; }))
      .attr("d", path)

      .attr("class", "depto-borde");

   //municipalities
    svg.selectAll(".mpio")
      .data(topojson.feature(co, co.objects.mpios).features)
      .enter().append("path")
      .on('mouseover', mouseoverMun )
      .on('mouseout',mouseoutMun)
      .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")

  })

  function mouseoverMun(d){
    d3.select(this).style("fill","orange");
    div.style("opacity", .9)  
       .html(d.properties.name)   
       .style("left", (d3.event.pageX) + "px")        
       .style("top", (d3.event.pageY - 28) + "px"); 
      document.getElementById("department").innerHTML=d.properties.dpt

  }

  function mouseoutMun() {
    d3.select(this).style("fill","#777");
    div.style("opacity",0);
         document.getElementById("department").innerHTML='';

  }

  function mouseoverDep(d){
  d3.select(this).style("fill","blue");

    div.style("opacity", .9)  
       .html(d.properties.dpt)   
       .style("left", (d3.event.pageX) + "px")        
       .style("top", (d3.event.pageY - 28) + "px");  
       document.getElementById("department").innerHTML=d.properties.dpt
  }

  function mouseoutDep(d){
    d3.select(this).style("fill","#777");
    div.style("opacity",0);
      document.getElementById("department").innerHTML='';
  }

http://jsfiddle.net/ctqhd851/

Answer 1

You have set up two mouseover events for two different and entirely overlapping layers, but the mouseover (and mouseoff) events will only trigger for the topmost layer. So, you can instead achieve this effect with the mouseover only on the municipality layer.

As the municipality layer has a department property you want to:

1. Color all municipalities that share a department a certain color
2. Color the specific municipality that the mouse is over a second color

For number 1, you can achieve one easily if you give a class to each municipality that is its department's name (you could also apply a filter and update some of the features). I changed where you set the class of your municipality features to this:

.attr("class", function(d) { return "mpio " + "_" + d.id + " " + d.properties.dpt})

Then I added some code in the mouseover event for municipalities:

  d3.selectAll("."+d.properties.dpt)
     .style("fill","steelblue")

This will select every municipality in a given department, and set its color to blue.

For number 2:

In relation to the individual municipality that the mouse is hovering on, nothing changes from what you have really, you just want to apply that style after you set the department's municipalities to show one color (so you don't overwrite the change when coloring each municipality in the department).

The mouseout event just needs to remove the styles we've added by giving a fill of none to all the municipalities. As we only modified municipalities, we can select every municipality and set the fill to none.

Here's a snippet showing mouseover effects that highlight department and municipality.

Note that I took out the meshes that you were using, and instead applied the formatting of the edges to the polygons themselves

 var width = 900, height = 900; var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); 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); //departments svg.selectAll(".dpto") .data(topojson.feature(co, co.objects.depts).features) .enter().append("path") .attr("class", function(d) { return "depts " + "_" + d.id; }) .attr("d", path) //municipalities svg.selectAll(".mpio") .data(topojson.feature(co, co.objects.mpios).features) .enter().append("path") .on('mouseover', mouseoverMun ) .on('mouseout',mouseoutMun) .attr("class", function(d) { return "mpio " + "_" + d.id + " " + d.properties.dpt}) .attr("d", path) }) function mouseoverMun(d){ // Turn the department blue d3.selectAll("."+d.properties.dpt) .style("fill","steelblue") // Turn the municipality orange d3.select(this).style("fill","orange"); // Show a tooltip div.style("opacity", .9) .html(d.properties.name) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); } function mouseoutMun() { d3.selectAll(".mpio").style("fill","none"); div.style("opacity",0); } 

  path { fill: #777; } .mpio { fill: none; stroke: #fff; stroke-opacity: .25; stroke-width: .5px; pointer-events: all; } .depts { fill: none; stroke: #ff0000; stroke-linejoin: round; stroke-width: 1; opacity: 1; } div.tooltip { position: absolute; text-align: center; width: 100px; height: 28px; padding: 2px; font: 12px sans-serif; background: white; border-radius: 8px; pointer-events: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://d3js.org/topojson.v1.min.js"></script>