javascript 将 d3.csv 方法转换为 d3.csv.parse 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26111455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
converting a d3.csv method to d3.csv.parse method
提问by Baki
I just need to draw a d3 barchart of data retrieved from an sql query, so I don't have a tsv or csv file but a string of data in csv format. I know I can use d3.csv.parse method but somehow I couldn't figure out how to convert the example code for the csv bar chart using the data from a file to csv.parse method for data contained in a string variable.
我只需要绘制一个从 sql 查询中检索到的数据的 d3 条形图，所以我没有 tsv 或 csv 文件，而是一串 csv 格式的数据。我知道我可以使用 d3.csv.parse 方法，但不知何故我无法弄清楚如何使用来自文件的数据将 csv 条形图的示例代码转换为 csv.parse 方法，用于字符串变量中包含的数据。
here is the example code for csv 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; })]);
here is the sample data for testing purposes and the code that doesn't work
这是用于测试目的的示例数据和不起作用的代码
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; })]);
Apparently, I cannot simply replace a file with a var containing the contents of the file. What would be the best way to do it?
显然，我不能简单地用包含文件内容的 var 替换文件。最好的方法是什么？
Many thanks
非常感谢
回答by OrionMelt
d3.csv.parseaccepts only two parameters — a string which contains your CSV data, and an accessor function which you can use to construct the data array. Note the difference between d3.csvand d3.tsv, which both also accept the callback function as a parameter.
d3.csv.parse只接受两个参数——一个包含 CSV 数据的字符串，以及一个可用于构造数据数组的访问器函数。需要注意的区别d3.csv和d3.tsv，这两者也接受回调函数作为参数。
letters = d3.csv.parse(bardata, function(d) {
return {
letter:d.letter,
frequency:+d.frequency
};
});
This would parse CSV data in bardataand put the values as an array in letters. In fact, the accessor function is optional. The following would also do the same thing:
这将解析 CSV 数据bardata并将值作为数组放入letters. 实际上，访问器函数是可选的。以下也将做同样的事情：
letters = d3.csv.parse(bardata);
Once you have the array, you can build the bar chart as usual. See snippet below.
获得数组后，您可以像往常一样构建条形图。请参阅下面的片段。
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>