D3条形图未解析csv
D3 bar chart not parsing csv
我正试图用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;
})
删除名称转换。好的
相关文章:
- 用chart.js绘制条形图
- d3.js用按钮更新条形图工具提示
- 添加新数据时D3.JS条形图列偏移量
- Chart.js条形图:网格颜色和隐藏标签
- 在条形图中呈现数据AngularJS,如何制作一个好的多条形图
- Chart.js 2.1.2条形图动画问题
- 如何在Extjs5中更改条形图的标签
- d3.js条形图转换无法正常工作
- 从数组在d3中创建条形图时出现问题
- 条形图元素的HTML5 JavaScript锚点
- d3.js组条形图不起作用
- 图表.js:条形图点击事件
- 如何使用chartjs设置条形图中每个条形图的颜色
- Raphael.js条形图及教程
- 对d3堆叠条形图的数据进行排序
- Javascript FLOT组合条形图;以x轴为字符串的折线图
- 将CSV加载到NVD3中以制作离散条形图
- D3条形图未解析csv
- 用d3.csv加载csv数据在nvd3多条形图示例(JSON格式)
- 如何用csv文件创建条形图