在 d3 js 中计算来自 csv 数据集的文本字段

Question

我正在使用 d3.js 来制作一个简单的条形图。 我使用d3.csv数据制作了条形图。 但是，现在我只尝试使用 csvfile 中的一列。

此列中的所有项目都是字符串值，具体来说，它们是城市。 其中一些是独一无二的，但其他人不止一次出现。

例子：

city
Mor
Gdl
Mex
Bog
Mad
Rio
Bar
Mor
Gdl
Mor
Rio
Mor
Bog
Mor

我想使用此列创建条形图。 x value将是城市， y value将是城市出现的次数。

我正在使用此代码。 但是，我无法获得y value ：

d3.csv("../cities.csv", function(error, dataset) {
    dataset.forEach( function(d) {
        d.count = +d.city;
    });
    x.domain(dataset.map( function(d) { return d.city; }));
    y.domain([0, d3.max(dataset, function(d) { return d.count; })]);
    svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + h + ")")
        .call(xAxis);
    svg.append('g')
        .attr('class', 'y axis')
        .call(yAxis)
        .append('text')
        .attr('transform', 'rotate(-90)')
        .attr('y', 6)
        .attr('dy', '.71em')
        .style('text-anchor', 'end')
        .text('Número de contratistas');
    var bars = svg.selectAll('.bar')
        .data(dataset)
        .enter()
        .append('rect')
        .attr('class', 'bar')
        .attr('x', function(d) { return x(d.city); })
        .attr('width', x.rangeBand())
        .attr('y', function(d) { return y(d.count); })
        .attr('height', function(d) { return h - y(dataset.map(d.count));});
});

从这段代码中，我第一次尝试从每个城市获得计数是：

dataset.forEach( function(d) {
    d.count = +d.city;
});

我怎样才能改进这个功能以获得这种条形图？

欢迎任何改进它的建议！ 谢谢。

Answer 1

如果我理解正确，您想计算每个城市出现的频率并将其存储在 d.count 中。 尝试这个：

// define count object that holds count for each city
var countObj = {};

// count how much each city occurs in list and store in countObj
dataset.forEach(function(d) {
    var city = d.value;
    if(countObj[city] === undefined) {
        countObj[city] = 0;
    } else {
        countObj[city] = countObj[city] + 1;
    }
});
// now store the count in each data member
dataset.forEach(function(d) {
    var city = d.value;
    d.count = countObj[city];
});