d3.js

Question

我在地图上，部门和城市绘制公寓和镇的不同颜色。这些部门由红线划定界限。我想当我把鼠标悬停在市政府的时候，除了画这个直辖市外，还画了另一种颜色的部门。

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

您已设置了两个鼠标悬停事件两个不同的和完全重叠层，但鼠标悬停（和移开鼠标）事件将只触发最顶层。因此，您可以仅在市政层上使用鼠标悬停来实现此效果。

由于本市层要一个部门属性：

1. 颜色共享一个部门一个特定的颜色
2. 颜色的具体直辖市鼠标是在第二彩色所有城市

对于数字1，如果您为各部门的名称（也可以应用过滤器并更新某些功能）给每个城市授课，则可以轻松实现。我改变了你设置的类别的市区町村的特点，以这样的：

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

然后我说在鼠标悬停事件各市一些代码：

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

这将在一个给定的部门选择每个城市，并将其颜色设置为蓝色。

对于2号：

关于各个市政府将鼠标悬停在，没有从你真的，你只是想你设置的部门的直辖市，以显示一种颜色后应用该样式的改变（因此，在为部门中的每个市政当局着色时不会覆盖更改）。

鼠标事件只需要删除我们添加的样式，通过给所有的城市提供一个没有填充的样式。由于我们只修改了城市，我们可以选择每个城市并设置填充为零。

下面是显示鼠标悬停效果的代码段，其中突出显示了部门和市政府。

注意，我拿出你使用的网格，而是应用的边的格式，以多边形自己

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

\t \t path { 
 
\t \t fill: #777; 
 
\t \t } 
 

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

 

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

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