csvからD3データセットを作成できません

私はD3の新機能ですが、bl.ockコードを自分の要件に変換しようとしています。csvからD3データセットを作成できません

私が使用している例では、htmlファイル内のデータの静的な辞書があります。これをcsvのデータを使用するように切り替えることを試みています。

次のように私のcsvファイルがある：

カテゴリ、対策
サム、0.3
ピーター、0.25
ジョン、0.15
リック、0.05
レニー、0.18
ポール、0.04
スティーブ、0.03

私が試したコードは次のとおりです：

var dataset = d3.map(); 
dataset = d3.csv("http://blahblah/testingtesting/DThree/PieChart.csv" 
       , function(d) { dataset.set(d.category, +d.measure); }) 

function dsPieChart() { 

    var width = 400, 
     height = 400, 
     outerRadius = Math.min(width, height)/2, 
     innerRadius = outerRadius * .999, 
     // for animation 
     innerRadiusFinal = outerRadius * .5, 
     innerRadiusFinal3 = outerRadius * .45, 
     color = d3.scale.category20() 
    ; 

    var vis = d3.select("#pieChart") 
     .append("svg:svg") 
     .data([dataset]) 
     .attr("width", width) 
     .attr("height", height) 
     .append("svg:g") 
     .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")") 
    ; 
    .. 
    ... 
    ....

dsPieChart()の外側にある埋め込みデータセットに到達できないという意味で、またはd3.csvを正しく使用していないという意味で、上記の使用時にパイが表示されません。

ノート

元のコードはこのように見えた：

function dsPieChart() { 

    var dataset = [{ 
     category: "Sam", 
     measure: 0.30 
    }, { 
     category: "Peter", 
     measure: 0.25 
    }, { 
     category: "John", 
     measure: 0.15 
    }, { 
     category: "Rick", 
     measure: 0.05 
    }, { 
     category: "Lenny", 
     measure: 0.18 
    }, { 
     category: "Paul", 
     measure: 0.04 
    }, { 
     category: "Steve", 
     measure: 0.03 
    }]; 



    var width = 400, 
     height = 400, 
     outerRadius = Math.min(width, height)/2, 
     innerRadius = outerRadius * .999, 
     // for animation 
     innerRadiusFinal = outerRadius * .5, 
     innerRadiusFinal3 = outerRadius * .45, 
     color = d3.scale.category20() //builtin range of colors 
    ; 


    var vis = d3.select("#pieChart") 
     .append("svg:svg") //create the SVG element inside the <body> 
     .data([dataset]) //associate our data with the document 
     .attr("width", width) //set the width and height of our visualization (these will be attributes of the <svg> tag 
     .attr("height", height) 
     .append("svg:g") //make a group to hold our pie chart 
     .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")") //move the center of the pie chart from 0, 0 to radius, radius 
    ;

出典

2016-10-05 whytheq

からヒントを取ったが1で実際にあなたのCSVですライン？ – JNF

@JNFありがとうございます - 書式設定の問題 - 今すぐ修正します – whytheq

なぜ 'dataset = d3.csv（...'？ 'csv'がデータセットを返すとは思っていません） – JNF

は、この方法を試してみてください：

d3.csv("file.csv", function(rows) 
    { 
     //rows is an array of json objects containing the data in from the csv 
     dataset = rows.map(function(d) 
     { 
      //each d is one line of the csv file represented as a json object     
      return {"category": d.category, "measure": +d.measure} ; 
     }) 
     dsPieChart(); 
    })

はhere

出典

2016-10-05 14:06:35 JNF

ok - これは大いに助けてくれました - ありがとう – whytheq

csvからD3データセットを作成できません

答えて

関連する問題