在d3.js中为公寓和城镇涂上不同的颜色 [英] Paint the apartment and the town of different colors in d3.js
问题描述
我有地图，部门和市政当局.各部门之间用红线分隔.我希望将鼠标悬停在市政上时，除了要绘制该市政外，还要绘制另一种颜色的部门.
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='';
}
推荐答案
您已经为两个不同且完全重叠的层设置了两个mouseover事件，但是mouseover(和mouseoff)事件只会触发最顶层.因此，您可以仅在市政层上通过鼠标悬停来实现此效果.
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，如果您给每个市政当局上一堂以其部门名称命名的课程，则可以轻松实现(您也可以应用过滤器并更新某些功能).我将您在其中设置市政功能类别的位置更改为:
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.
对于数字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).
mouseout事件只需要删除所有添加的样式即可，而无需为所有市政当局填充任何样式.由于我们只修改了自治市，因此我们可以选择每个自治市，并将填充设置为无.
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.
请注意，我取出了您正在使用的网格，而是将边缘的格式应用于多边形本身
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>
这篇关于在d3.js中为公寓和城镇涂上不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
