将d3.csv方法转换为d3.csv.parse方法 [英] converting a d3.csv method to d3.csv.parse method

问题描述

我只需要绘制一个d3 barchart从sql查询检索的数据，所以我没有tsv或csv文件，但是一个csv格式的数据字符串。我知道我可以使用d3.csv.parse方法，但不知何故我无法弄清楚如何转换csv条形图的示例代码使用数据从文件到csv.parse方法包含在字符串变量中的数据。 / p>

这里是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;}）; 
  

这里是用于测试目的的示例数据和不起作用的代码

  var bardata =letter，frequency \ nA，0.89 \ nB，0.71 \ nC，0.45; 
 d3.csv.parse（bardata，type，function（data）{
 x.domain（data.map d）{return d.letter;}））; 
 y.domain（[0，d3.max（data，function（d）{return d.frequency;}） code> 

显然，我不能简单地用一个包含文件内容的var替换一个文件什么是最好的方法？

非常感谢

解决方案

d3 .csv.parse 只接受两个参数 - 一个包含CSV数据的字符串，以及一个可用于构造数据数组的访问器函数。注意 d3.csv 和 d3.tsv 之间的区别，两者也接受回调函数作为参数。 / p>

  letters = d3.csv.parse（bardata，function（d）{
 return {
 letter： d.letter，
 frequency：+ d.frequency 
}; 
}）; 
  

这将解析 bardata 中的CSV数据将值作为 letters 中的数组。实际上，访问器函数是可选的。以下也会做同样的事情：

  letters = d3.csv.parse（bardata）; 
  

一旦你拥有了数组，就可以像往常一样构建条形图。请参阅下面的代码段。

  var bardata =letter，frequency\\\
A，0.89\\\
B，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 ）.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 ）{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 .svg.axis（）。scale（y）.orient（left））; svg.selectAll（。bar）.data（letters）.enter（）。append（rect）.attr ，bar）.attr（x，function（d）{return x（d.letter）; } .attr（width，x.rangeBand（））.attr（y，function（d）{return y（d.frequency）;} height-y（d.frequency）;}）;  

  < script src =https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.4/d3.min.js>< / script>  

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.

here is the example code for csv file:

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?

Many thanks

解决方案

d3.csv.parse accepts 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.csv and d3.tsv, which both also accept the callback function as a parameter.

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

This would parse CSV data in bardata and put the values as an array in letters. In fact, the accessor function is optional. The following would also do the same thing:

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>

这篇关于将d3.csv方法转换为d3.csv.parse方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！