convertir un método d3.csv al método d3.csv.parse

Solo necesito dibujar un diagtwig de barras d3 de los datos recuperados de una consulta SQL, por lo que no tengo un file tsv o csv sino una cadena de datos en formatting csv. Sé que puedo usar el método d3.csv.parse pero de alguna manera no pude entender cómo convertir el código de ejemplo para el gráfico de barras csv utilizando los datos de un file al método csv.parse para datos contenidos en una variable de cadena.

aquí está el código de ejemplo para el file csv:

d3.csv("data.csv", type, function(error, data) { x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

aquí están los datos de muestra para fines de testing y el código que no funciona

 var bardata="letter,frequency\nA,0.89\nB,0.71\nC,0.45"; d3.csv.parse(bardata,type, function(data) { x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

Aparentemente, no puedo simplemente replace un file con una var que contenga el contenido del file. ¿Cuál sería la mejor manera de hacerlo?

Muchas gracias

d3.csv.parse acepta solo dos parameters: una cadena que contiene sus datos CSV y una function de acceso que puede usar para build la matriz de datos. Tenga en count la diferencia entre d3.csv y d3.tsv , que ambos también aceptan la function de callback como parámetro.

 letters = d3.csv.parse(bardata, function(d) { return { letter:d.letter, frequency:+d.frequency }; }); 

Esto analizará los datos CSV en bardata y colocará los valores como una matriz en letters . De hecho, la function de acceso es opcional. Lo siguiente también haría lo mismo:

 letters = d3.csv.parse(bardata); 

Una vez que tenga la matriz, puede build el gráfico de barras como de costumbre. Vea el fragment a continuación.

 var bardata="letter,frequency\nA,0.89\nB,0.71\nC,0.45"; var margin = {top: 20, right: 30, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1, .2); var y = d3.scale.linear() .range([height, 0]); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); letters = d3.csv.parse(bardata, function(d) { return { letter:d.letter, frequency:+d.frequency }; }); x.domain(letters.map(function(d) { return d.letter; })); y.domain([0, d3.max(letters, function(d) { return d.frequency; })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.svg.axis().scale(x).orient("bottom")); svg.append("g") .attr("class", "y axis") .call(d3.svg.axis().scale(y).orient("left")); svg.selectAll(".bar") .data(letters) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function(d) { return height - y(d.frequency); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.4/d3.min.js"></script>