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

问题描述

我无法理解使用 D3 事件和调度函数.我有一个我一直在研究的图表示例:"Vertical Bar Charts与传奇."

绘制图表和图例很容易，但我想添加一个功能，当我将鼠标悬停在位于图表右侧的相关文本图例上时突出显示每个条.

我通读了所有事件文档，甚至查看了许多示例，其中大部分都非常复杂，但我似乎遗漏了一些东西.有谁知道如何最好地完成文本图例鼠标悬停功能，该功能会调度事件以自动更改相应垂直条的颜色?

解决方案

这个问题类似于您在 d3-js Google 群组中发布的内容.在不重复我在那里写的内容的情况下，我会重申您可能不想要 d3.dispatch；用于自定义事件抽象(例如画笔和行为).使用原生事件会更简单.

如果您希望图例在鼠标悬停时更改相应栏的颜色，请将问题分解为以下步骤:

1. 检测图例上的鼠标悬停.
2. 选择相应的栏.
3. 更改栏的填充颜色.

首先，使用 selection.on 侦听图例元素上的鼠标悬停"事件.当鼠标移到图例元素上时，您的侦听器函数将被调用，并使用两个参数调用:数据 (d) 和索引 (i).您可以使用此信息通过 d3.select 选择相应的栏.最后，使用 selection.style 用新颜色更改填充"样式.>

如果您不确定如何在图例鼠标悬停时选择相应的栏，通常有几个选项.最直接的就是按index选择，假设legend元素个数和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; }).style("fill", "red");}

另一种选择是给每个矩形一个唯一的 ID，然后按 id 选择.例如，在初始化时，您可以说:

rect.attr("id", function(d, i) { return "rect-" + i; });

然后，您可以在鼠标悬停时按 id 选择矩形:

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:

1. Detect mouseover on the legend.
2. Select the corresponding bar.
3. 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屋！