0

d3.js で csv ファイルを使用する際に問題が発生しました。

最初に、データを含む配列を使用して視覚化しました。

var データセット = [1,1,1,1,1,1,1,2,3,4]

数に応じて、長方形の色が異なります。次のコード行を使用してこれを行いました。

.style("fill", function(d) {        
if      (d==1)  {return "black"}  
else if (d==2)  {return "red"} 
else if (d==3)  {return "yellow"} 
else if (d==4)  {return "green"} 
else            {return "purple"}             
;})

コードをより柔軟にしたいので、csv-datafile を使用して同じことをしたいと考えています。次のようになります。

2008
1
1
1
1
2
3
4

次のコード行に含めました。

d3.csv("landtag.csv", function(d) {
}

しかし、それは機能しません: すべての長方形は紫色であるため、「else」が選択されました。

円の数はデータ長に依存します - これは機能しています!

なぜそれが可能なのですか？csv ファイルを間違った方法で挿入していませんか?

チュートリアルですでにいくつかの解決策を試しましたが、うまくいきませんでした。

ご協力いただきありがとうございます！

私の完全なコード:

// Width and height
    var w = 1000;
    var h = 1000;

    // create svg variable
    var svg = d3.select("p")
        .append("svg")
        .attr("id", "sitze") ;       

    var sitze; 

    d3.csv("landtag.csv", function(d) {


    // create variable
    var rect = svg.selectAll("rect")
        .data(d["2008"])
        .enter()
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 50)
        .attr("height", 50)

        //Bar width depending on number of datapoints in array 
        .attr("x", function(d, i) {
            return i * (w / d.length);  
            })

        // if for different colors
        .style("fill", function(d) {        
            if      (d=="1")    {return "black"}  
            else if (d=="2")    {return "red"} 
            else if (d=="3")    {return "yellow"} 
            else if (d=="4")    {return "green"} 
            else            {return "purple"}             
        ;}) 

        // paddings
        .attr("x", function(d, i) {return (i % 17) * 55;}) 
    .attr("y", function(d, i) {return Math.floor(i / 17) * 55;});

  })
4

1 に答える 1

0

CSV ファイルの内容は文字列として解析されます。これは、数字の 1 ではなく、文字列 "1" を取得することを意味します。すべての比較を文字列 (例: (d=="1")) に変更すると、再び機能するはずです。または、文字列を処理する前に数値に変換することもできます。たとえば、次のコードを使用します。

csv.forEach(function(d) { return +d; });
于 2013-08-10T14:02:11.090 に答える