0

我希望将脚本的这一部分（来自 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”

数据文件.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");

}
4

2 回答 2

2

您的绘图代码需要保留在 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

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

于 2013-09-13T00:52:39.730 回答
0

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

d3.csv("dataFile.csv", function(error, data) {
  // do something exciting with data
}
于 2013-09-12T17:37:10.243 回答