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

Question

我正在使用 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 未定义，我明白为什么，但我不确定我应该做什么。请帮忙。

Answer 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 的内容。

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

D3.js ( in Coffeescript) show data on click

javascript

d3.js

coffeescript

data-visualization