gpt4 book ai didi

javascript - 这个漂亮的D3.js散点图高亮效果是如何实现的?

转载 作者:搜寻专家 更新时间:2023-11-01 05:14:28 25 4
gpt4 key购买 nike

我喜欢这个散点图在您将鼠标悬停在圆圈上时突出显示圆圈的方式:http://novus.github.com/nvd3/examples/scatterWithLegend.html

但是里面代码很多(貌似作者定义了自己的标准库),具体是怎么实现的我也想不通。

是否与.hover 类和stroke-width 属性有关?

我想在我自己的散点图上实现同样的效果,尽管我使用的是圆圈而不是路径,所以这可能是不可能的。

最佳答案

例子中,效果好像是在scatter.js中实现的来自第 136 行。

不过,仅突出显示单个圆圈要容易得多,并且不需要示例中的所有其他内容。您需要做的就是向圆圈添加一个 mouseover 处理程序并(例如)增加 stroke-width。这看起来像

d3.selectAll("circle").data(...).enter()
.append(...)
.classed("circle", true)
.on("mouseover", function() { d3.select(d3.event.target).classed("highlight", true); })
.on("mouseout", function() { d3.select(d3.event.target).classed("highlight", false); });

我假设 CSS 类 highlight 定义了样式。或者,您可以只使用(在此示例中)CSS 类 circle:hover 而无需事件处理程序。

关于javascript - 这个漂亮的D3.js散点图高亮效果是如何实现的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10772569/

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