Question

所以我正在尝试创建一个可排序的条形图。这是我的代码 -

我收到错误 - 数组没有方法适用，我不知道为什么。我正在寻找http://bl.ocks.org/mbostock/3885705的指导，并在Backbone视图中写这个。此外，当我单击复选框（使用类.sort-histogram）时，没有任何反应 - 在更改功能运行中没有控制台日志。它们在首次加载页面时运行。

更新 -

所以我完成了错误，但我的东西仍然没有排序 -

  render: =>
@$el.empty()
@$el.append(@template)

bins = @model.get('bins')
bins = [1,1,1,2,3,4,4,4,4,5,5,6,6,6,2,2,3,3,1,23,54,6,6,7,6,5,4]
bins = ['hello','hello','goodbye','goodbye','beatles','kill','harry','harry']
values = ["hello", "hello", "goodbye", "goodbye", "beatles", "kill", "harry", "harry"]

# calculate frequency for each word in the list
groups = _(values).chain().groupBy(_.identity).map((values, key) ->
  freq: values.length
  value: key
).sortBy((d) ->
  d.value
).value()
maxFreq = d3.max(groups, (d) ->
  d.freq
)
colors = d3.scale.category20()

width = 400
height = 200
svg = d3.select("body").append("svg").attr("width", width + 100).attr("height", height).append("g")
padding = 3
barHeight = height / groups.length - padding
yScale = d3.scale.linear().domain([0, groups.length]).range([0, height])
xScale = d3.scale.linear().domain([0, maxFreq]).range([0, width])
bars = svg.selectAll(".bar").data(groups).enter().append("g")
bars.append("rect").attr("x", 0).attr("y", (d, i) ->
  yScale(i)
).attr("width", (d) ->
  xScale d.freq
).attr("height", barHeight)
.attr("fill", (d,i) ->
  colors(i)
)

bars.append("text").text((d) ->
  d.value
).attr("x", (d) ->
  10 + xScale(d.freq)
).attr("y", (d, i) ->
  yScale i
).attr("dy", "1em")



d3.select('.sort-histogram').on('click', () => 
  @sortBars(svg, yScale, bars)
) 


  sortBars:(svg, yScale, bars) =>
    console.log('sortBars calld')
    sortOrder = @model.get('sortOrder')
    @model.set(not sortOrder)
    console.log('sort order')
    console.log sortOrder


sortFunc = (a,b) -> 
  if true
    console.log a.freq - b.freq
    return a.freq - b.freq
  else
    return b.freq - a.freq

bars
  .sort(sortFunc)
  .attr('y', (d,i) ->
    console.log('yscale')
    console.log yScale(i)
    return yScale(i)
  )
  .transition().delay((d,i) ->
    return i * 50
  )
  .duration(1000)

当我在控制台中看到这个效果时，我看到元素已经排序，但条形的顺序不同。

d3.js可排序直方图不起作用

0 个答案: