Question

我希望将我的脚本的这部分（来自dashingd3js教程）替换为具有相同数据的CSV文件。

var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                 { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                 { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

csv位于同一目录中，名为“dataFile.csv”

dataFile.csv：

x,y
1,5
20,20
40,10
60,40
80,5
100,60

编辑：尝试整合来自Lars和d3noob的反馈，这就是我尝试过的：

//The data for our line
d3.csv("testData.csv", function(error, lineData){
//This is the accessor function we talked about above
 var lineFunction = d3.svg.line()
                      .x(function(d) { return d.x; })
                      .y(function(d) { return d.y; })
                      .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                .attr("width", 200)
                                .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                        .attr("d", lineFunction(lineData))
                        .attr("stroke", "blue")
                        .attr("stroke-width", 2)
                        .attr("fill", "none");

}

以下是我正在编辑的另一个代码版本，因为我正在进行更多研究。它目前无效。

//The data for our line
d3.csv("testData.csv", function(d){
    return{
    lineData.x: d.x,
    lineData.y: d.y };
}, function(error, rows) {
console.log(rows);  
});



//This is the accessor function we talked about above
 var lineFunction = d3.svg.line()
                      .x(function(d) { return d.x; })
                      .y(function(d) { return d.y; })
                      .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                .attr("width", 200)
                                .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                        .attr("d", lineFunction(lineData))
                        .attr("stroke", "blue")
                        .attr("stroke-width", 2)
                        .attr("fill", "none");

}

Answer 1

您的绘图代码需要保留在csv回调中：

d3.csv("testData.csv", function(data){
    // this converts data to number
    data.forEach(function(d) {
        d.x = +d.x;
        d.y = +d.y;
    });

    // rest of drawing code
    ...
});

请参见此处的另一个示例：

http://vida.io/documents/QZZTrhk7SmfChczYp

如果您可以发布链接到工作代码，则更容易调试。

Answer 2

您需要通过d3.csv的异步请求加载文件。示例代码：

d3.csv("dataFile.csv", function(error, data) {
  // do something exciting with data
}

使用CSV进行数据处理

2 个答案: