javascript - 无法更改 d3.js 矩形的填充

标签 javascript d3.js coffeescript

所以我有这段代码-

bars.
  append('rect')
  .attr('x', 0)
  .attr('y', (d, i) ->
    return yScale(i)
  ).attr('width', (datum) ->
    return xScale(datum.freq)
  )
  .attr('height', barHeight)
  .attr('fill', 'blue')
  .attr('class', 'bar')
  .on('click', ->
    bars.selectAll('rect').attr('fill', '#0000ff')
    currentFill = d3.select(this).style('fill')
    nextColor = {}
    if currentFill == '#0000ff'
      nextColor = '#ff0000'
    else
      nextColor = '#0000ff'
    d3.select(this).style('fill', nextColor)
  )

但是,bars.selectAll('rect') 并没有改变矩形的颜色。为什么?

最佳答案

attr() 替换为 style()。所以你的台词:

bars.selectAll('rect').attr('fill', '#0000ff')

应该是:

bars.selectAll('rect').style('fill', '#0000ff')

关于javascript - 无法更改 d3.js 矩形的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18279921/

相关文章:

javascript - 使用 d3.js 删除 svg 文本元素

coffeescript - 用 CoffeeScript 扩展 Javascript 对象

javascript - WebRTC 远程视频未显示在非本地主机上

javascript - Google 跟踪代码管理器在模板中发现无效的 HTML、CSS 或 JavaScript

javascript - Angular 服务缓存

javascript - div 元素中的 childNode

syntax - coffeescript语法错误 “unexpected REGEX”

javascript - 如何使画笔的范围与父元素的大小相匹配?

javascript - 为什么最大变量取 d3.max() 值而最小值 d3.min() 不能正常工作?

javascript - LatLong 落在 D3 + Leaflet 中的给定多边形内