2016-10-05 8 views
0

Ich bin sehr neu in D3, aber versuche, einige bl.ock-Code auf meine Anforderungen zu konvertieren.D3-Datensatz von csv failing

Das Beispiel, das ich verwende, hat ein statisches Wörterbuch der Daten innerhalb der HTML-Datei - ich versuche, dies zu verwenden, um Daten von einem CSV zu verwenden.

Meine csv ist wie folgt:

Kategorie messen
Sam, 0,3
Peter, 0,25
John, 0,15
Rick, 0,05
Lenny, 0,18
Paul, 0,04
Steve , 0.03

Der Code, den ich ausprobiert habe, ist wie folgt:

Der Kuchen erscheint nicht bei der Verwendung der oben genannten - gibt es ein Problem Bereich, in dem Datensatz außerhalb von dsPieChart() bedeutet, dass es nicht erreichbar ist, oder bin ich gerade nicht mit d3.csv richtig?


note

Der ursprüngliche Code sah wie folgt aus:

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 
    ; 
+0

Ist Ihr CSV tatsächlich in einem Linie? – JNF

+0

@JNF Danke - Formatierung Problem - Ich werde jetzt ändern – whytheq

+0

Warum tun Sie 'Dataset = d3.csv (...'? Ich glaube nicht, 'csv' gibt einen Datensatz zurück. – JNF

Antwort

1

Versuchen Sie, diese Art und Weise:

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(); 
    }) 

cue Nahm von here

+0

ok - das half viel - danke – whytheq