0

我只是无法读取 csv 文件。我想为它显示一个图表。我收到错误：TypeError: n is undefined

请帮帮我！！

d3.csv("example.csv", function(dataset){
var svg=d3.select("body").append("svg").attr("width",w).attr("height",h);
var xScale=d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0,w],0.05); 
var  yScale=d3.scale.linear().domain([0,d3.max(dataset.value)]).range([0,h]);

svg.selectAll("rect").data(dataset).enter().append("rect").attr({x:function(d,i)    {return xScale(i);}, y:function(d){
return h-yScale(d);}, width:xScale.rangeBand(),height:function(d){return    yScale(d);},fill:function(d){return  "rgb(0,0,"+(d.value*10)+")";}});

     d3.select("svg").selectAll("text").data(dataset).enter().append("text").text(function(d)       {return d.value;}).attr("x",function(d,i){
return xScale(i)+xScale.rangeBand()/2;}).attr("y",function(d){return             h-yScale(d)+14;}).attr("font-family","sans-serif").attr("font-size","10px").attr
("fill","white").attr("text-anchor","middle");

d3.select("p").on("click",function(){
var numValues=dataset.length;
dataset=[]; 
for(var i=0;i<numValues;i++)
{var newNumber=Math.floor(Math.random()*25);
dataset.push(newNumber,newNumber);
}
yScale.domain([0,d3.max(dataset)]);
svg.selectAll("rect").data(dataset).transition().delay(function(d,i){return     i/dataset.length*1000;})
.duration(500).attr("y",function(d){return h-yScale(d); }).attr("height",function(d)    {return yScale(d);}).attr("fill",function(d){
return "rgb(0,0,"+(d.value*10)+")";});
svg.selectAll("text").data(dataset).transition().delay(function(d,i){return        i/dataset.length*1000;}).duration(500).text(function(d){return d.value;})
.attr("x",function(d,i){return   xScale(i)+xScale.rangeBand()/2;}).attr("y",function(d)    {return h-yScale(d)+14;})
.attr("font-family","sans-serif").attr("font-      size","10px").attr("fill","white").attr("text-anchor","middle")
                     ;});


});

这是我的 csv 文件名，值 john，78 brad，105 amber，103 james，2 dean，74 pat，45 matt，6 andrew，18 ashley，15

4

1 回答 1

0

正如 cuckovic 所提到的，您的代码中有很多错误，更不用说您似乎使用不同的样式来实现令人困惑的类似事情。无论如何，有 3 个基本的东西给你带来麻烦，第一个是你的数据集。csv 的值列被读取为字符串。您需要通过以下方式将其转换为数字：

dataset.forEach(function (d,i) {
    d.value = +d.value;
});

您遇到的下一个问题是您将范围设置为的 yScale .range([0,h]);。对于 y 方向从顶部开始并朝底部增加的 svg 视口，这是错误的方式。所以你需要在范围内交换 0 和 h 。

接下来要解决的是 和 之间的d区别d.value。当您通过data()操作符绑定数据时，通常是在绑定一个数组。在这种情况下，它是一个对象数组。因此，在绑定数据之后，d引用该数组的每个元素，在这种情况下，它是一个包含name和value的对象。如果您的数据集可以看到这一点console.log。当d传递给yScale它时，它不知道如何处理它，因为它不是一个数字，你真正想要做的是传递d.value给yScale. 因此，将您d的 '替换为d.value.

最后，您的代码的最后一部分d3.select("p")似乎没有添加任何内容。

我建议您阅读 Scott Murray 的教程，如果您还没有的话，尤其是这个。

于 2013-10-23T15:03:47.327 回答