D3.js（在 Coffeescript 中）在点击时显示数据答案

【问题标题】：D3.js ( in Coffeescript) show data on clickD3.js（在 Coffeescript 中）在点击时显示数据
【发布时间】：2015-05-02 01:52:11
【问题描述】：

我正在使用 D3.js 创建气泡图。现在，当我单击每个气泡时，我希望它在 <h3 id="comment"></h3> 标记中显示评论。

这是我的 data.csv 文件：

name,count,group,comment
apple,5,red,"This is the best apple ever."
grape,10,purple,"Grapes are huge."
banana,8,yellow,"Are these bananas even ripe?"
pineapple,1,yellow,"Great for making juice."
...

在我的 viz.coffee 中，我有：

  idValue = (d) -> d.name
  textValue = (d) -> d.name
  groupValue = (d) -> d.group
  commentValue= (d) -> d.comment

原来，我使用下面的代码来显示点击时气泡的名称：

  updateActive = (id) ->
    node.classed("bubble-selected", (d) -> id == idValue(d))
    if id.length > 0
      d3.select("#comment").html("<h3>#{id} is selected.</h3>")
    else
      d3.select("#comment").html("<h3>Nothing is selected</h3>")

我应该如何更改它，以便在您单击气泡时显示评论？

我试过了：

updateActive = (id) ->
        node.classed("bubble-selected", (d) -> id == idValue(d))
        if id.length > 0
          d3.select("#comment").html(d.comment)
        else
          d3.select("#comment").html("<h3>Click on a bubble to read its comment.</h3>")

但它似乎不起作用，因为d 未定义，我可以看到原因，但我不确定我应该做什么。请帮忙。

【问题讨论】：

使用 plunker 或类似的代码会很棒，因为它有点难以理解。
@EmilIngerslev 你做到了！即使不知道完整的代码。非常感谢！
太棒了！很高兴我能帮忙:)

标签： javascript d3.js coffeescript data-visualization

【解决方案1】：

尽管我不完全确定您的代码，但我认为这应该可以工作：

updateActive = (id) ->
  node.classed("bubble-selected", (d) -> id == idValue(d))
  if id
    for x in data when idValue(x) is id
      d3.select("#comment").html(commentValue(x))
  else
    d3.select("#comment").html("<h3>Click on a bubble to read its comment.</h3>")

这里data 是您通过.data() 提供给d3 的内容。

【讨论】：