javascript - d3 - 地理 map 悬停选项

标签 javascript css d3.js

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

相关文章:

javascript - 每个卷轴都会带您到一个新的 div 以启用动画

javascript - 这是正则表达式BUG吗?

javascript - 两个类之间的状态

css - 将 sass 列表传递给具有多个参数的 mixin

javascript - d3 append() 带函数参数

javascript - Angular 2 -bypassSecurityTrustHtml 以及bypassSecurityTrustScript

javascript - .validate 规则 : check jquery var

html - 如何获得穿过右上角的 css 三 Angular 形?

javascript - 删除 d3 map 中的阿拉斯加和夏威夷

javascript - 未捕获的 TypeError : this. d3.set 不是函数