jjzjj

javascript - d3.select(this) 适用于鼠标悬停，但不适用于鼠标悬停时调用的函数

coder 2024-07-21 原文

我是 javascript 的新手，目前正在努力选择 this 对象，同时尝试进行 d3 选择。我制作了以下示例，其中包含我正在调用的函数和一个 on mousemove 事件:

function changeFont() {
  d3.select(this)
    .attr('font-size', '2em')
}

...
.on('mousemove', function() {
  var mouse = d3.mouse(this);
  var xVal = mouse[0];

  // this would work, but not when its called in a function
  // d3.select(this)
  //  .attr('font-size', '2em')

  // this works
  d3.select(this)
   .attr("opacity", 1)

  // this doesnt
  changeFont()
});

在此处未显示的主脚本中，我通过编写处理每个鼠标移动、鼠标悬停等效果的函数来组织我的代码。但是，由于这些功能，我遇到了这个问题，我无法在该鼠标悬停功能内执行 d3.select(this) ...关于我应该做些什么的任何想法？

我应该将 this 作为参数传递给我的 changeFont() 函数吗？还是我应该以不同的方式访问this？

谢谢!

最佳答案

虽然安德鲁的 answer如果您从字面上看这个问题可能是最合适的，我想加两分钱。您真正的问题似乎不是获取 this，而是重复访问该元素以应用您的操作。由于摆弄 this 在 JavaScript 中可能会很痛苦，因此可能值得采取稍微不同的方法，直接传递选择。这也将提高性能，因为无需一遍又一遍地重新选择 this。

首先，让我们稍微重构一下您的 changeFont() 函数以接受一个选择对象。

function changeFont(selection) {
  selection
    .attr('font-size', '2em');
}

请注意，这如何使函数更普遍适用，因为它不会对传递给它的选择做出任何假设。它可以是您的 d3.select(this)，一个包含多个元素的选择或任何其他 D3 选择对象。此外，您不需要保留以前的 this 范围。

调用这个函数基本上有两种方法。

  1. 最明显的是在调用函数时直接将选择作为参数传递:

    const d3This = d3.select(this);
changeFont(d3This);

  2. 幸运的是，有一种更优雅的方法可以使用 D3 自己的 selection.call()。如果您需要对同一个选择进行多次调用，它甚至允许方法链接。

    function changeFont(selection) { selection.attr("font-size", "2em"); }
function changeFill(selection) { selection.attr("fill", "limegreen"); }
function changeOpacity(selection) { selection.attr("opacity", "0.1"); }

// ...
.on("mouseover", function() {
  // Call the functions for this element.
  d3.select(this)
    .call(changeFont)
    .call(changeFill)
    .call(changeOpacity);

  // Instead, you could also apply the same pattern to all texts.
  d3.selectAll("text")
    .call(changeFont)
    .call(changeFill)
    .call(changeOpacity);

}

关于javascript - d3.select(this) 适用于鼠标悬停，但不适用于鼠标悬停时调用的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50161179/

时调javascriptcodethisselectiond3.js

有关javascript - d3.select(this) 适用于鼠标悬停，但不适用于鼠标悬停时调用的函数的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. ruby - inverse_of 是否适用于 has_many？ - 2

    当我使用has_one时，它​​工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  5. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  6. ruby - "undefined method"用于 rails 模型 - 2

    我正在使用带有Rails的Devise，我想添加一个方法“getAllComments”，所以我这样写:classUser在我的Controller中:defdashboard@user=current_user@comments=@user.getAllComments();end当我访问我的url时，我得到了undefinedmethod`getAllComments'for#我做错了什么？谢谢 最佳答案 因为getAllComments是一个类方法，而您正试图将其作为实例方法访问。您要么需要访问它:User.getAllCom

  7. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  9. ruby - 你会如何在 Ruby 中表达成语 "with this object, if it exists, do this"？ - 2

    在Ruby(尤其是Rails)中，您经常需要检查某物是否存在，然后对其执行操作，例如:if@objects.any?puts"Wehavetheseobjects:"@objects.each{|o|puts"hello:#{o}"end这是最短的，一切都很好，但是如果你有@objects.some_association.something.hit_database.process而不是@objects呢？我将不得不在if表达式中重复两次，如果我不知道实现细节并且方法调用很昂贵怎么办？显而易见的选择是创建一个变量，然后测试它，然后处理它，但是你必须想出一个变量名(呃)，它也会在内存中

  10. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

    我有一个集合选择:此方法的单选按钮是什么？谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中，它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/18525986/

随机推荐