我正在使用 d3 geomaps 创建美国的地理 map 。 当我将鼠标悬停在状态上时,我希望突出显示该状态。那可能吗? 这是我当前的代码:
<html>
<head>
<meta charset="utf-8">
<link href="d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
var map = d3.geomap.choropleth()
.geofile('d3-geomap/topojson/countries/USA.json')
.projection(d3.geo.albersUsa)
.column('2012')
.unitId('fips')
.scale(1000)
.legend(true);
d3.csv('data.csv', function(error, data) {
d3.select('#map')
.datum(data)
.call(map.draw, map);
});
</script>
最佳答案
是的,你可以,看看我制作的这个 JSFiddle:http://jsfiddle.net/b6huwcd7/1/
我所做的就是将此 CSS 代码添加到示例代码中:
path.unit:hover{
fill:red;
}
关于javascript - d3 - 地理 map 悬停选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32363269/