我有一个搜索框,当所有圈子具有相同的名称时,它会突出显示所有圈子,并淡出不匹配的圈子。一切都按预期工作。
<input class="highlight" name="searchbox" id="searchbox" type="text" list="initname-datalist" placeholder="Search Project/Initiative.." onInput="initiativeSearch(this.value)">
<datalist id="initname-datalist"></datalist>
function initiativeSearch(initSelection) {
circles.transition()
.delay(0)
.duration(500)
.style("opacity", function(d) {
return d.data.initiative_name !== initSelection ? 0.5 : 1;
})
.style("stroke", function(d) {
return d.data.initiative_name === initSelection ? "black" : "grey";
});
}
initiative_name
是我的 CSV 中的列名。我想做类似的事情,但使用 mouseover
,所以当用户 mouseover
一个圆圈时,所有其他具有相同名称的圆圈都将突出显示。
我有一个当前的 mouseover
,它向被鼠标悬停的圆圈添加黄色描边,还有一个工具提示。我不一定需要保留黄色笔划。
.on("mouseover", function(d) {
d3.select(this) // highlight the circle that the tooltip relates to
.transition()
.delay(0)
.duration(100)
.style("stroke", "yellow")
.style("stroke-width", 5);
tooltip.transition()
.duration(200)
.style("opacity", .95);
tooltip.html("<strong>" + d.data.initiative_name + "</strong>)
.style("left", d3.select(this).attr("cx") + "px")
.style("top", d3.select(this).attr("cy") + "px");
})
.on("mouseout", function(d) {
d3.select(this)
.transition()
.delay(0)
.duration(500)
.style("stroke", "grey")
.style("stroke-width", 1);
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
有什么想法可以使用 mouseover
突出显示具有相同 initiative_name
的所有圈子吗?
最佳答案
如果不使用数据进行实际测试,很难编写解决方案,但这是可能的:
.on("mouseover", function(d) {
circles.style("opacity", function(e) {
return d.data.initiative_name !== e.data.initiative_name ? 0.5 : 1;
});
//etc...
关于javascript - 通过鼠标悬停突出显示具有重复名称的圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51414501/