Javascript D3.js（在Coffeescript中）单击显示数据

我正在用D3.js创建气泡图。现在，当我单击每个气泡时，我希望它在

标记中显示一条注释

这是我的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（“选择气泡”（d）->id==idValue（d））
如果id.length>0
d3.select（“#comment”）.html（“#{id}被选中。”）
其他的
d3.选择（“#注释”）.html（“未选择任何内容”）

我应该如何更改它，以便在单击气泡时显示注释

我试过：

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>")

updateActive=（id）->
node.classed（“选择气泡”（d）->id==idValue（d））
如果id.length>0
d3.选择（“#注释”）.html（d.comment）
其他的
d3.选择（“#comment”）.html（“单击气泡以阅读其注释”）

---

但它似乎不起作用，因为

d

是未定义的，我知道为什么，但我不确定我应该做什么。请提供帮助。

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

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>")

updateActive=（id）->
node.classed（“选择气泡”（d）->id==idValue（d））
如果id
当idValue（x）为id时，数据中的x
d3.选择（“#comment”）.html（commentValue（x））
其他的
d3.选择（“#comment”）.html（“单击气泡以阅读其注释”）

---

这里是您通过

.data（）

向d3提供的

数据
 使用plunker或类似的代码会很好，因为它有点难理解。@EmilIngerslev你做到了！即使不知道完整的代码。非常感谢！伟大的很高兴我能帮忙：）