2

所以我成功地创建了一个数字频率的直方图。我想对文字做同样的事情。

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]

@svg = d3
  .select('.histogram')
  .append('svg')
  .attr('width', @model.get('width'))
  .attr('height', @model.get('height'))
  .append('g')
data = d3
  .layout
  .histogram().bins(bins.length)(bins)
bar = @svg
  .selectAll('.bar')
  .data(data)
  .enter()
  .append('g')
bar
  .append('rect')
  .attr('x', 0)
  .attr('y', (d) -> return d.x*5)
  .attr("width", (d) -> return d.y * 20)
  .attr("height", 5)
  .attr('fill','steel')

我想为这样的数组构建频率直方图 -

    bins = ['hello','hello','goodbye','goodbye','beatles','kill','harry','harry']

我该怎么做呢？似乎使用直方图布局的价值函数是一个不错的选择，但这意味着我需要以某种方式维护状态。另外，我希望这个词在其相关栏旁边显示为标签。

谢谢

4

1 回答 1

3

我认为您不应该为分类数据 layout.histogram ，因为这种布局的想法是将值分配到 bin 中，而在您的情况下，每个单词只有一个单独的栏。

所以考虑这个演示。

这里我手动计算分布：

// calculate frequency for each word in the list
var groups = _(values).chain()
    .groupBy(_.identity)
    .map(function (values, key) {
        return {
            freq: values.length,
            value: key
        };
    })
    .sortBy(function (d) { return d.value; })
    .value();

然后从这些组中绘制一个简单的条形图：

var bars = svg.selectAll('.bar')
    .data(groups)
    .enter().append('g');

bars
    .append('rect')
    .attr('x', 0)
    .attr('y', function (d, i) { return yScale(i); })
    .attr("width", function (d) { return xScale(d.freq); })
    .attr("height", barHeight)
    .attr('fill','steel');
于 2013-08-03T10:27:31.000 回答