我正在使用d3.js
制作世界地图。在该地图中,我需要为每个国家/地区绑定mouseover
事件。
例如:如果我mouseover
印度我需要更改印度的填充(背景)颜色。
我实施了mouseover
活动。但我的问题是每当我mouseover
在全国(印度)发挥作用影响所有国家。我的意思是补色影响所有国家。但它需要只影响当前的国家。
我也尝试使用this
,但对我来说没有运气。
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
请帮助任何人解决我的问题。
var width = 1000,
height = 500;
var projection = d3.geo.robinson()
.scale(150)
//.translate(100,100)
.precision(.5);
var path = d3.geo.path()
// .attr("class","path")
.projection(projection);
var svg = d3.select('#'+id)
.append('svg')
.attr("width", width)
.attr("height", height)
.attr("style", "background:" + json.bc);
//shape
d3.json("world.json", function(error, world) {
svg
.datum(topojson.feature(world, world.objects.countries))
.append("path")
.on("mouseover", function(){d3.select(this).style("fill", "red");})
.on("mouseout", function(){d3.select(this).style("fill", "white");})
.attr("style", "fill:" + json.cbc)
.attr("class", "country")
.attr("d", path)
;
});
鼠标悬停之前
MouseOver后
答案 0 :(得分:1)
此代码:
svg
.datum(topojson.feature(world, world.objects.countries))
.append("path")
...
说 - >我有一条数据,从中画出一条路径。
将其更改为:
svg.selectAll(".countries")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
...
说 - >我有多个数据(功能),将数据绑定到我的选择(selectAll)并为每个组件绘制一条路径。
示例here。