草庐IT

javascript - d3 - 将鼠标悬停在图例上以突出显示相应的数据

coder 2025-03-01 原文

使用 d3 成功创建了热图。

这是 FIDDLE .

我对使用 d3 的 mouseover 事件有一些基本的想法。但现在我想更进一步。

这就是我要找的。当我将鼠标悬停在图例上时，我希望悬停的图例各自的数据在图表中突出显示。

有人可以帮我实现吗？

最佳答案

您没有将数据绑定(bind)到图例，这使得这项任务有点困难，但您仍然可以相当轻松地完成它。这个想法是将由填充颜色定义的类分配给 rect 元素，然后在鼠标悬停处理程序中进行相应的选择。代码如下所示。

// for the rectangles
.attr("class", function(d) {  
  return "hour bordered " + "color-" + colorScale(d.value).substring(1);
})

// for the legend
.on("mouseover", function(d, i) {
  svg.selectAll("rect.color-" + colors[i].substring(1)).style("stroke", "blue");
})
.on("mouseout", function(d, i) {
  svg.selectAll("rect.color-" + colors[i].substring(1)).style("stroke", "white");
});

完整示例 here .

关于javascript - d3 - 将鼠标悬停在图例上以突出显示相应的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21235173/

javascript相应section34coded3.js

有关javascript - d3 - 将鼠标悬停在图例上以突出显示相应的数据的更多相关文章

  1. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  4. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  5. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  6. ruby-on-rails - RubyMine 将刚刚创建的工作项目的某些行突出显示为错误 - 2

    我是RubyonRails的新手，因为我来自Java世界并在IntelliJIdea工作，所以我开始使用RubyMine进行RoR开发。我已经生成了新项目并在RubyMine中打开了它。一切都编译并工作正常，但RubyMine将某些行突出显示为错误(但实际上没有错误)。例如application_controller.rb中的代码protect_from_forgerywith::exception'with'后的分号突出显示为错误，后面说'Expected:;或行尾'类似的错误高亮在项目中很多地方我想可能是不同的Ruby和Rails版本存在一些问题？或者RubyMine不支持某种新语

  7. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  8. ruby - 在 ruby​​ Selenium 中移动鼠标(move_to) - 2

    我正在尝试使用Ruby中的SeleniumWebDriver2.4模拟鼠标移动如果我运行测试，是否应该看到鼠标在我的屏幕上移动？我很困惑。我试过很多不同的方法示例代码:require'selenium-webdriver'driver=Selenium::WebDriver.for:firefoxdriver.navigate.to'http://www.google.com'element=driver.find_element(:id,'gbqfba')那我试过了driver.action.move_to(element).performdriver.mouse.move_to(e

  9. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接？ - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

  10. arrays - 在二维数组中搜索零并创建相应的行和列 0 - 2

    这是我的代码，可以运行，但它太大了。我想重构它。req_row=-1req_col=-1a.each_with_indexdo|row,index|row.each_with_indexdo|col,i|ifcol==0req_row=indexreq_col=ibreakendendendifreq_col>-1andreq_row>-1a.each_with_indexdo|row,index|row.each_with_indexdo|col,i|print(req_row==indexori==req_col)?0:colprint""endputs"\r"endend输入:二

随机推荐