Question

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

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

示例：

d3.csv

我想使用此列创建条形图。 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));});
});

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

欢迎任何改进建议！感谢。

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];
});

从d3 js中的csv数据集计算文本字段

1 个答案: