32

我无法理解使用 D3 事件和调度函数。我有一个我一直在研究的图表示例：“带有图例的垂直条形图”。

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

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

4

2 回答 2

59

这个问题与您在 d3-js Google Group 中发布的问题类似。在不复制我在那里写的内容的情况下，我会重申您可能不想要 d3.dispatch; 用于自定义事件抽象（例如画笔和行为）。使用本机事件会更简单。

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

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

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

如果您不确定如何在图例鼠标悬停时选择相应的栏，通常有几个选项。最直接的就是按索引选择，假设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，也可以通过其他属性或类进行选择。

于 2012-03-27T03:48:06.607 回答
6

迈克的回答很棒。

我用它来选择我正在绘制的网格中的一个单元格：

.on('click', (d, i) ->
      console.log("X:" + d.x, "Y:" + d.y) #displays the cell x y location
      d3.select(this).style("fill", "red");

因此，当我在其中输入数据时，我添加了事件侦听器并使用 d3.select(this)。

请参阅以下上下文中的代码：

 vis.selectAll("rect")
    .data(singleArray)
    .enter().append("svg:rect")
    .attr("stroke", "none")
    .attr("fill", (d) -> 
      if d.lifeForm
        return "green" 
      else
        return "white")
    .attr("x", (d) -> xs(d.x))
    .attr("y", (d) -> ys(d.y))
    .attr("width", cellWidth)
    .attr("height", cellHeight)
    .on('click', (d, i) ->
      console.log("X:" + d.x, "Y:" + d.y)
      d3.select(this).style("fill", "red");
      return
    )
于 2013-01-20T23:28:15.353 回答