如何正确添加和使用D3事件？ [英] How to properly add and use D3 Events?

问题描述

我无法理解使用D3事件和调度函数。我有一个我一直在工作的图表示例：垂直条形图与传奇。

绘制图表和图例很容易，但我想添加的能力，突出每个条，文字图例。

我已阅读过所有的活动文件，甚至看过一些例子，其中大部分都是漂亮的复杂，但我似乎缺少的东西。有没有人知道如何最好地完成文本图例鼠标悬停功能，分派事件以自动更改相应垂直条的颜色？

解决方案

此问题类似于d3-js Google网上论坛中的您发布的。没有重复我在那里写的，我会重申，你可能不想要d3.dispatch;这是为自定义事件抽象（如画笔和行为）。

如果你想要你的图例在鼠标悬停时改变相应栏的颜色，那么将问题分成几步： p>

1. 检测鼠标悬停在图例上。


2. 选择相应的栏。


3. 更改栏的填充颜色。

首先，使用 selection.on 来监听图例元素上的mouseover事件。当鼠标移过图例元素时，将调用您的监听函数，并且将使用两个参数调用：数据（ d ）和索引（ i ）。您可以使用此信息通过 d3.select 选择相应的栏。最后，使用 selection.style 将填充样式更改为新颜色。

如果您不确定如何选择图例鼠标悬停的相应栏，通常有几个选项。最直接的是通过索引选择，假设图例元素的数量和rect元素的数量相同，并且它们处于相同的顺序。在这种情况下，如果局部变量 rect 包含rect元素，您可以说：

  function mouseover（d，i）{
 d3.select（rect [0] [i]）。style（fill，red）; 
} 
  

如果你不想依赖索引，另一个选项是扫描用于基于相同数据的匹配条。这使用 selection.filter ：

  function mouseover（d，i）{
 rect.filter（function（p）{return d === p;}） ）; 
} 
  

另一种选择是给每个rect一个唯一的ID，然后选择ID。例如，在初始化时，您可以说：

  rect.attr（id，function（d，i）{return rect-+ i;}）;然后，您可以在鼠标悬停时通过id选择rect：
 
 
 
 $ b 
 b $ b 
  function mouseover（d，i）{
 d3.select（＃rect-+ i）.style（fill，red） ; 
} 
  
上面的例子是设计的，因为我使用索引来生成id属性在这种情况下，使用通过索引选择的第一种技术更简单和更快速）。一个更现实的例子是，如果你的数据有一个name属性;您可以使用 d.name 生成id属性，同样按id选择。如果您不想生成唯一的ID，也可以选择其他属性或类。
 
I'm having trouble understanding using D3 events and dispatch functions. I have a chart example that I've been working on called: "Vertical Bar Charts With Legends."

Drawing the charts and the legends was easy enough but I'd like to add the ability to highlight each bar as I mouseover its correlating text legend, located to the right of the chart.

I've read through all of the event documentation and even looked at a number of examples, most of which are pretty complicated, but I seem to be missing something. Would anyone know how to best accomplish the text legend mouseover functionality that dispatches events to automatically change colors of the corresponding vertical bars?
解决方案
This question is similar to the one you posted in the d3-js Google Group. Without duplicating what I wrote there, I would reiterate that you probably don't want d3.dispatch; that is intended for custom event abstractions (such as brushes and behaviors). It'll be simpler to use native events.

If you want your legend to change the color of the corresponding bar on mouseover, then breakdown the problem into steps:

Detect mouseover on the legend.
Select the corresponding bar.
Change the bar's fill color.
First, use selection.on to listen for "mouseover" events on the legend elements. Your listener function will be called when the mouse goes over a legend element, and will be called with two arguments: the data (d) and the index (i). You can use this information to select the corresponding bar via d3.select. Lastly, use selection.style to change the "fill" style with the new color.

If you're not sure how to select the corresponding bar on legend mouseover, there are typically several options. The most straightforward is to select by index, assuming that the number of legend elements and number of rect elements are the same, and they are in the same order. In that case, if a local variable rect contains the rect elements, you could say:
function mouseover(d, i) {
  d3.select(rect[0][i]).style("fill", "red");
}
If you don't want to rely on index, another option is to scan for the matching bar based on identical data. This uses selection.filter:
function mouseover(d, i) {
  rect.filter(function(p) { return d === p; }).style("fill", "red");
}
Yet another option is to give each rect a unique ID, and then select by id. For example, on initialization, you could say:
rect.attr("id", function(d, i) { return "rect-" + i; });
Then, you could select the rect by id on mouseover:
function mouseover(d, i) {
  d3.select("#rect-" + i).style("fill", "red");
}
The above example is contrived since I used the index to generate the id attribute (in which case, it's simpler and faster to use the first technique of selecting by index). A more realistic example would be if your data had a name property; you could then use d.name to generate the id attribute, and likewise select by id. You could also select by other attributes or class, if you don't want to generate a unique id.

                        
这篇关于如何正确添加和使用D3事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！