D3条形图未解析csv

D3 bar chart not parsing csv

本文关键字:csv 条形图 D3      更新时间:2023-09-26

我正试图用CSV加载的数据构建一个基本的、响应性强的条形图。我的图表没有读取CSV,给了我NaN。这是我的图表的屏幕截图。这是我当前的代码:

  <script type="text/javascript">
var url = "data/data.csv", 
    margin = {top: 30, right: 10, bottom: 30, left: 10},
    width = parseInt(d3.select('#chart').style('width'), 10),
    width = width - margin.left - margin.right,
    height = 200, // placeholder
    barHeight = 20,
    spacing = 5,
    total = d3.format('n');
// scales and axes
var x = d3.scale.linear()
    .range([0, width])
    .domain([0, 4000]); // hard-coding this because I know the data
var y = d3.scale.ordinal();
var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(3);
// create the chart
var chart = d3.select('#chart').append('svg')
    .style('width', (width + margin.left + margin.right) + 'px')
  .append('g')
    .attr('transform', 'translate(' + [margin.left, margin.top] + ')');
d3.csv(url).row(function(d) {
    d.total = +d.total;
    d.name = +d.name;
    return d;
}).get(function(err, data) {
    // sort
    data = _.sortBy(data, 'total').reverse();
    // set y domain
    y.domain(d3.range(data.length))
        .rangeBands([0, data.length * barHeight]);
    // set height based on data
    height = y.rangeExtent()[1];
    d3.select(chart.node().parentNode)
        .style('height', (height + margin.top + margin.bottom) + 'px')
    // render the chart
    // add top and bottom axes
    chart.append('g')
        .attr('class', 'x axis top')
        .call(xAxis.orient('top'));
    chart.append('g')
        .attr('class', 'x axis bottom')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis.orient('bottom'));
    var bars = chart.selectAll('.bar')
        .data(data)
      .enter().append('g')
        .attr('class', 'bar')
        .attr('transform', function(d, i) { return 'translate(0,'  + y(i) + ')'; });
    bars.append('rect')
        .attr('class', 'background')
        .attr('height', y.rangeBand())
        .attr('width', width);
    bars.append('rect')
        .attr('class', 'total')
        .attr('height', y.rangeBand())
        .attr('width', function(d) { return x(d.total); })
    bars.append('text')
        .text(function(d) { return d.name; })
        .attr('class', 'name')
        .attr('y', y.rangeBand() - 5)
        .attr('x', spacing);

    bars.append('line')
        .attr('class', 'median')
        .attr('x1', x(median))
        .attr('x2', x(median))
        .attr('y1', 1)
        .attr('y2', y.rangeBand() - 1);
});
// resize
d3.select(window).on('resize', resize); 
function resize() {
    // update width
    width = parseInt(d3.select('#chart').style('width'), 10);
    width = width - margin.left - margin.right;
    // resize the chart
    x.range([0, width]);
    d3.select(chart.node().parentNode)
        .style('height', (y.rangeExtent()[1] + margin.top + margin.bottom) + 'px')
        .style('width', (width + margin.left + margin.right) + 'px');
    chart.selectAll('rect.background')
        .attr('width', width);
    chart.selectAll('rect.total')
        .attr('width', function(d) { return x(d.total); });
    // update axes
    chart.select('.x.axis.top').call(xAxis.orient('top'));
    chart.select('.x.axis.bottom').call(xAxis.orient('bottom'));
}
// highlight code blocks
hljs.initHighlighting();
</script>

数据如下:

name, total
Brian, 1514
Frankie, 1439
Jeffery, 1615
Jerry, 685
Kenneth, 3233
Michael, 116
Roy, 817
Timothy, 2184

我可以看到您的代码和数据有几个问题:

对于数据的问题,您可以通过删除空格来清理行,例如:

name,total
Brian,1514
Frankie,1439
Jeffery,1615
Jerry,685
Kenneth,3233
Michael,116
Roy,817
Timothy,2184

或者,您可以在代码中使用[]符号引用它们,例如:

d[' total'] = +d[' total'];

d3将前导空格添加到每个记录的属性名称中。当您将属性引用为d.total时,它将返回未定义和未定义的强制值。数字是NaN。

例如。data[0]['total']未定义,但data[0]['dotal']具有您所期望的"1514"。从数据中删除空格是处理此问题的最简单方法。

在你的代码中,你这样做:

d.name = +d.name;

这将把名称值转换为NaN,因为它是一个以字母字符开头的文本字符串,所以javascript不知道如何将其强制为数字。

您还引用了一个未在代码中声明的名为median的变量。

我创建了一个jsfiddle来帮助:http://jsfiddle.net/BenLyall/eh1r6j2e/12/

注意:我已经更改了d3.csv…行,以便使用DOM中的一个元素来存储数据。

为什么要把名字变成数字低于代码

d3.csv(url).row(function(d) {
    d.total = +d.total;
    d.name = +d.name;
    return d;
})

删除名称转换。好的