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

Question

我用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)

具体来说，我写了以下内容来实现悬停以改变同一组中的颜色并添加相应的CSS代码，但它不会改变同一组气泡的颜色。

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

请指教。感谢。