在 d3 中绘制上传的数据答案

【问题标题】：Graphing Uploaded data in d3在 d3 中绘制上传的数据
【发布时间】：2014-04-21 19:54:25
【问题描述】：

我正在尝试使用上传的 csv 文件数据使用 d3 绘制图形。但是，我不断收到未定义 d3 的错误消息。这是代码示例。 csv 文件由 3 列 300 行组成，以逗号分隔。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>A Plot</title>

<style>
</style>

<div id="plotA"></div>
<script src="http://d3js.org/d3.v3.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 1000 - margin.left - margin.right,
    height = 150 - margin.top - margin.bottom;

function Graph() {

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line1 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.ECG); });

var svg1 = d3.select("#ecgplot").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 + ")");

d3.csv("#fileinput", function(error, data) {
  data.forEach(function(d) {
    d.date = +d.tm;
    d.A = +d.A;
    d.B = +d.B;
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.A; }));

  svg1.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("transform", "rotate(0)")
      .attr("y", 28)
      .attr("x", 450)
      .attr("dx", ".71em")
      .style("text-anchor", "end")
      .text("Time (in second)");
  svg1.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -35)
      .attr("x", -35)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("A");

function transition1(path1) {

var totalLength1 = path1.node().getTotalLength();

  path1
      .attr("stroke-dasharray", totalLength1 + " " + totalLength1)
      .attr("stroke-dashoffset", totalLength1)
      .transition()
      .duration(25000)
      .ease("linear")
      .attr("stroke-dashoffset", 0)
      .each("end", function() { d3.select(this).call(transition1); });
}

});

}//End of Graph Function

</script>
</head>

<body>

<form>

  Select a file: <input type="file" accept=".csv" id="fileinput">
  <input type="button" id="addButton" value="Add to CSV File" onclick="Graph()" />

</form>

</body>
</html>

【问题讨论】：

不确定为什么会出现该错误，因为您已包含 D3 库。您能否发布一个完整的示例来演示该问题？此外，您必须提供一个指向d3.csv 的 URL，因此您的代码不会那样工作。您需要在服务器端接收和存储上传的 CSV。
使用相同的代码我得到以下错误：Uncaught SyntaxError: Unexpected token ILLEGAL d3.v3.js:1178。修改脚本标签为<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 不报错。
也许你在脚本的 url 之前缺少： type="text/javascript" ，如下所示：

标签： javascript html csv d3.js buttonclick

【解决方案1】：

我想现在可以通过为所有 js 代码添加超时来解决此问题，因为您的 d3 库是从 cdn 加载的，这可能需要几秒钟。

【讨论】：