如何正确添加和使用D3事件?

时间:2012-03-27 01:35:16

标签: events d3.js dispatch

我无法理解使用D3事件和调度功能。我有一个我一直在研究的图表示例:“Vertical Bar Charts With Legends。”

绘制图表和图例很容易,但我想添加突出显示每个栏的功能,因为我将鼠标移到位于图表右侧的相关文本图例。

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

2 个答案:

答案 0 :(得分:60)

此问题类似于d3-js Google Group中的one you posted。如果不重复我在那里写的内容,我会重申你可能不想要d3.dispatch;用于自定义事件抽象(例如画笔和行为)。使用原生事件会更简单。

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

  1. 在图例上检测鼠标悬停。
  2. 选择相应的栏。
  3. 更改栏的填充颜色。
  4. 首先,使用selection.on在图例元素上侦听“鼠标悬停”事件。当鼠标移过图例元素时,将调用您的侦听器函数,并将使用两个参数调用它们:数据(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; }).style("fill", "red");
    }
    

    另一个选择是给每个rect一个唯一的ID,然后按id选择。例如,在初始化时,您可以说:

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

    然后,您可以在鼠标悬停时选择id by id:

    function mouseover(d, i) {
      d3.select("#rect-" + i).style("fill", "red");
    }
    

    上面的例子是设计的,因为我使用索引来生成id属性(在这种情况下,使用第一种按索引选择的技术更简单,更快捷)。一个更现实的例子是,如果您的数据具有名称属性;然后,您可以使用d.name生成id属性,同样可以通过id进行选择。如果您不想生成唯一ID,也可以通过其他属性或类进行选择。

答案 1 :(得分: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
    )