Javascript D3气泡图（在CoffeeScript中）鼠标悬停改变同一组气泡的颜色

我用d3.js创建了一个气泡图。下面的每个水果都有一个气泡：半径由水果的计数定义，每个气泡都有一个标签，标签上有其名称，所有气泡都有相同的颜色。我让他们工作。现在我想做的是，当我在一个泡泡上悬停时，同一组的其他泡泡会变成相同的颜色，比如说黄色；当我解开时，气泡会回到原来的颜色

data.csv

name,count,group
apple,5,red
grape,10,purple
banana,8,yellow
cherry,2,red
pineapple,1,yellow
...

下面是visual.coffee的相关部分：

  rValue = (d) -> parseInt(d.count)
  idValue = (d) -> d.name
  textValue = (d) -> d.name
  groupValue = (d) -> d.group

  transformData = (rawData) ->
    rawData.forEach (d) ->
      d.count = parseInt(d.count)
      # rawData.sort((a, b) -> return -(a.value - b.value))
      # rawData.sort((a, b) -> return -(a.value - b.value))
      rawData.sort(() -> 0.5 - Math.random())
      # rawData.sort (a, b) -> b.value - a.value
    rawData

  chart = (selection) ->
    selection.each (rawData) ->

      data = transformData(rawData)
      maxDomainValue = d3.max(data, (d) -> rValue(d))
      rScale.domain([0, maxDomainValue])

      svg = d3.select(this).selectAll("svg").data([data])
      svgEnter = svg.enter().append("svg")
      svg.attr("width", width + margin.left + margin.right )
      svg.attr("height", height + margin.bottom )

      node = svgEnter.append("g").attr("id", "bubble-nodes")
        .attr("transform", "translate(#{margin.left},#{margin.top})")

      node.append("rect")
        .attr("id", "bubble-background")
        .attr("width", width)
        .attr("height", height)
        .on("click", clear)

      label = d3.select(this).selectAll("#bubble-labels").data([data])
        .enter()
        .append("div")
        .attr("id", "bubble-labels")

      update()

      # see if url includes an id already
      hashchange()

      # automatically call hashchange when the url has changed
      d3.select(window)
        .on("hashchange", hashchange)


  update = () ->
    data.forEach (d,i) ->
      d.forceR = Math.max(minCollisionRadius, rScale(rValue(d)))

    force.nodes(data).start()

    updateNodes()
    updateLabels()

  connectEvents = (d) ->
    d.on("click", click)
    d.on("mouseover", mouseover)
    d.on("mouseout", mouseout)

  clear = () ->
    location.replace("#")

  click = (d) ->
    location.replace("#" + encodeURIComponent(idValue(d)))
    d3.event.preventDefault()

  hashchange = () ->
    id = decodeURIComponent(location.hash.substring(1)).trim()
    updateActive(id)

  updateActive = (id) ->
    node.classed("bubble-selected", (d) -> id == idValue(d))
    # if no node is selected, id will be empty
    if id.length > 0
      d3.select("#status").html("<h3>The word <a href=\"http://www.google.com\"><span class=\"active\">#{id}</span></a> is now active</h3>")
    else
      d3.select("#status").html("<h3>No word is active</h3>")


  mouseover = (d) ->
    node.classed("bubble-hover", (p) -> p == d)
    node.classed("same-group",(d) -> group == groupValue(d))

  mouseout = (d) ->
    node.classed("bubble-hover", false)

  chart.jitter = (_) ->
    if !arguments.length
      return jitter
    jitter = _
    force.start()
    chart

  chart.height = (_) ->
    if !arguments.length
      return height
    height = _
    chart

  chart.width = (_) ->
    if !arguments.length
      return width
    width = _
    chart

  chart.r = (_) ->
    if !arguments.length
      return rValue
    rValue = _
    chart

  return chart

root.plotData = (selector, data, plot) ->
  d3.select(selector)
    .datum(data)
    .call(plot)

---

请告知。谢谢。

您似乎没有在任何地方定义

组。我也不知道你为什么要上两门课。应该类似于
node.classed（“气泡悬停”（p）->groupValue（p）==groupValue（d））
@larskothoff我没有在
groupValue=（d）->d.group中定义它，因为每个数据点都有
name
，
count
&
group
？如果没有，我应该如何定义它？请告知。至于我为什么写两行，我想通过给它们单独的类来区分悬停在上面的那一行和属于同一组的那一行。在这种情况下，您的代码应该是
d3。选择（this）.classed（“气泡悬停”，true）
和
node.classed（“同一组”，（p）->groupValue（p）==groupValue（d））
。
  mouseover = (d) ->
    node.classed("bubble-hover", (p) -> p == d)
    node.classed("same-group",(d) -> group == groupValue(d))