d3.csv yöntemine d3.csv.parse yöntemine dönüştürme

Question

Sadece bir sql sorgusundan alınan bir d3 veri çubuğu çizmem gerekiyor, bu yüzden bir tsv veya csv dosyası yok ama csv'de bir veri dizisi yok biçim. Ben d3.csv.parse yöntemini kullanabileceğimi biliyorum ama bir şekilde bir ds değişkeninde bulunan veriler için bir dosyadaki verileri csv.parse yöntemine kullanarak csv çubuk grafiğinin örnek kodunu nasıl değiştirebileceğimi anlayamadım. Burada

csv dosyası için örnek kod şudur: Burada

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

test amacıyla örnek verileri ve

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

Görünüşe çalışmıyor kod, ben sadece yerini alamaz dosyanın içeriğini içeren bir var dosyası. Bunu yapmanın en iyi yolu ne olurdu? CSV verileri içeren bir dize ve veri dizisini oluşturmak için kullanabileceğiniz bir erişimci işlevi -

çok teşekkürler

Answer 1

d3.csv.parse sadece iki parametre kabul eder. Her ikisi de geri arama işlevini bir parametre olarak kabul eden d3.csv ve d3.tsv arasındaki farka dikkat edin.

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

Bu bardata CSV veri ayrıştırma ve letters bir dizi olarak değerler koymak. Aslında, erişimci işlevi isteğe bağlıdır. Aşağıdakiler de aynısını yapar:

Diziye sahip olduğunuzda, çubuk grafiğini her zamanki gibi oluşturabilirsiniz. Aşağıdaki snippet'e bakı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>