gpt4 book ai didi

javascript - d3 - 地理 map 悬停选项

转载 作者:行者123 更新时间:2023-11-28 07:15:48 28 4
gpt4 key购买 nike

我正在使用 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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com