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 つあります。1 つ目はデータセットです。csv の値の列が文字列として読み取られています。次の方法で数値に変換する必要があります。

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

次の問題は、範囲を に設定した yScale です.range([0,h]);。これは、y 方向が上から始まり、下に向かって増加する svg ビューポートでは逆です。したがって、範囲内で 0 と h を入れ替える必要があります。

d次に対処することは、との違いd.valueです。演算子を介してデータをバインドするdata()と、通常は配列がバインドされます。この場合、それはオブジェクトの配列です。したがって、データをバインドした後、この場合はnameとvaluedを含むオブジェクトであるその配列の各要素を参照します。これは、データセットを使用している場合に確認できます。がに渡されると、それは数値ではないため、何をすべきかわかりません。本当にやりたいことは、 に渡すことです。だからあなたのをに置き換えてください。console.logdyScaled.valueyScaledd.value

最後に、で始まるコードの最後の部分はd3.select("p")何も追加していないようです。

Scott Murray のチュートリアルを読むことをお勧めします。特に、まだ読んでいない場合はこれを読んでください。

于 2013-10-23T15:03:47.327 に答える