Question

我只是无法读取csv文件。我想为它显示图表。我收到错误： TypeError：n未定义

请帮帮我!!

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文件名称，值约翰，78 布拉德，105 琥珀色，103 詹姆斯，2 院长，74 拍拍，45 亚光，6 安德鲁，18 阿什利，15

Answer 1

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

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

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

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

最后，从d.value开始的代码的最后一部分似乎没有添加任何内容。

我建议阅读Scott Murray的教程，特别是这个one，如果你还没有。

读取csv文件到绘图图时出错

1 个答案: