2016-05-17 31 views
1

円チャートの例をMike Bostockで処理しようとしていますが、データをCSVに変換しようとしていても機能していませんどうして?d3.jsのTSVデータの代わりにCSVを使用

ここはplnkで問題のコードです。また

http://plnkr.co/edit/C0bJ0gM1Q9gIGxVe0vyF?p=preview

d3.csv("data.csv", type, function(error, data) { 
    if (error) throw error; 

    var path = svg.datum(data).selectAll("path") 
    .data(pie) 
    .enter().append("path") 
    .attr("fill", function(d, i) { 
     return color(i); 
    }) 
    .attr("d", arc) 
    .each(function(d) { 
     this._current = d; 
    }); // store the initial angles 

    d3.selectAll("input") 
    .on("change", change); 

    var update = function() { 
    d3.select("input[value=\"oranges\"]").property("checked", true).each(change); 
    }; 

    function change() { 
    var value = this.value; 
    clearTimeout(update); 
    pie.value(function(d) { 
     return d[value]; 
    }); // change the value function 
    path = path.data(pie); // compute the new angles 
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
    } 
}); 

function type(d) { 
    return { 
     apples: d.apples, 
    oranges: d.oranges 
    }; 
} 

// Store the displayed angles in _current. 
// Then, interpolate from _current to the new angles. 
// During the transition, _current is updated in-place by d3.interpolate. 
function arcTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

、あなたはおそらく、私はD3に新しいです推測することができますよう。私はより効率的で、Excelファイルから生のCSVデータを使用したり、JSONに変換したり、データをd3に変換したりすることでより効果的だろうと思っていましたか? (私はこれが主観的であることを知っています。ただの意見を得ることを望むだけで、コーディングの問題に関しては重要ではありません)。あなたのCSVが間違っているとあなたが見るあなたの時間

+0

私はJSONが好きで読みやすく、速いかもしれないと思っています。変換については、なぜCSVに変換しようとしていますか? – thatOneGuy

+0

JSONも好きです。作成するdatavizに従ってJSONを構築できますが、これはもっと便利ですが、より多くの作業が必要になります。 –

答えて

4

ため

おかげで機能していません。

CSV:カンマ区切りの値です(スペースは使用できません)。

あなたのCSVには、カンマの後にスペースがあります。だから、すべてのリンゴの値はうまく動作しますが、スペースがないのにオレンジになると動作しません。'oranges'' oranges'(スペースに気付く)となり、すべての値にもスペースがあります。

これに変更し、それが正常に動作します:この例を参照してください使用するどのようなデータタイプについては

apples,oranges 
53277,200 
28479,200 
19697,200 
24037,200 
40245,200 

​​

What are the relative merits of CSV, JSON and XML for a REST API?

二答えはいくつかの良い比較を持っていますデータ型(CSV、JSON、XMLなど)。

利点:ここ

はスニペットです

XML - 、のDevがeasiilyクライアントとサーバーの両方で検証 にすることができ、XSLTそれに精通しているライブラリの多く(XSD、DTD) 、階層データ

JSON - 容易にクライアント側で解釈、コンパクト表記、 階層データ

CSV - Excelで開きます

欠点(?):

XML - 肥大化し、JSON

よりもJavaScriptで解釈することが困難

JSONを - 不適切に使用した場合は、evalを使用しないでください(セキュリティホールを提起することができます)、 すべての言語にそれを解釈するライブラリがあるわけではありません。

CSV - 階層データをサポートしていません、あなたは それをやって一つだけになるだろう、それは実際にほとんどの開発者は、有効なCSVに ファイルを解析する(CSV値は限りが間にあるように、新しい行を含めることができると思うよりもはるかに困難です 引用符など)。

+1

解決策+良いアドバイスありがとう! :) – since095

関連する問題