Question

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

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']

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

由于

Answer 1

我认为你不应该对分类数据进行layout.histogram，因为这个布局的想法是将值分配到bin中，而在你的情况下，你只需要为每个单词分别设置一个吧。

所以请考虑这个demo。

这里我手动计算分布：

// 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');

制作单词频率的直方图

1 个答案: