Javascript 无法将csv加载到d3散点图_Javascript_Csv_D3.js

Javascript 无法将csv加载到d3散点图

javascript csv d3.js

Javascript 无法将csv加载到d3散点图,javascript,csv,d3.js,Javascript,Csv,D3.js,下面是我的d3代码，如果我提到数据集及其编号，它将非常有效。但是，当我想从csv文件中获取数据时，它不会接受它 *错误 Error: Invalid value for <circle> attribute cx="NaN" 虽然如果我尝试谷歌浏览器 console.log(dataset) 我从csv获取数据，但当我运行它来应用时，它在浏览器中不起作用我使用括号作为IDE，使用谷歌浏览器作为默认浏览器 <body> <h1> Hello World

下面是我的d3代码，如果我提到数据集及其编号，它将非常有效。但是，当我想从csv文件中获取数据时，它不会接受它

*错误

Error: Invalid value for <circle> attribute cx="NaN"

虽然如果我尝试谷歌浏览器

console.log(dataset)

我从csv获取数据，但当我运行它来应用时，它在浏览器中不起作用

我使用括号作为IDE，使用谷歌浏览器作为默认浏览器

<body>

<h1> Hello World!! </h1>

<script type="text/javascript">

var dataset;
d3.csv("t.csv", function(d) {

dataset = d;

var h = 500;
var w = 1200;

var padding = 30;

var xscale = d3.scale.linear()
.domain([0,d3.max(dataset, function(d) { return d[0];})])
.range([padding, w- padding*2]);

var yscale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1];})])
.range([h-padding,padding]);

var rscale = d3.scale.linear()
.domain([0,d3.max(dataset , function(d) { return d[1];})])
.range([5,30]);

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

var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);


var circle = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) { return xscale(d[0]);})
.attr("cy", function(d) { return yscale(d[1]);})
.attr("r",function(d) { return rscale(d[1]);})
.on("mouseover", function(){d3.select(this).style("fill", "yellow");})
.on("mouseout", function(){d3.select(this).style("fill", function(dataset) { return "rgb(0,0," +(d*10) + ")";});});

var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) { return d[0] + "," + d[1];})
.attr("x", function(d) { return xscale(d[0]);})
.attr("y", function(d) { return yscale(d[1]);})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill" ,"red");

svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0, " + (h - padding) +")")
.call(xAxis);           
});

</script> 


</body>


你好，世界！！
var数据集；
d3.csv（“t.csv”，功能（d）{
数据集=d；
var h=500；
var w=1200；
var=30；
var xscale=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d[0]；}）]）
.范围（[填充，w-填充*2]）；
var yscale=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d[1]；}）]）
.范围（[h-填充，填充]）；
var rscale=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d[1]；}）]）
.范围（[5,30]）；
var xAxis=d3.svg.axis（）
.scale（xscale）
.东方（“底部”）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var circle=svg.selectAll（“circle”）
.数据（数据集）
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d）{return xscale（d[0]）；}）
.attr（“cy”，函数（d）{return yscale（d[1]）；}）
.attr（“r”，函数（d）{返回rscale（d[1]）；}）
.on（“mouseover”，function（）{d3.select（this）.style（“fill”，“yellow”）；}）
.on（“mouseout”，function（）{d3.select（this）.style（“fill”，function（dataset）{return“rgb（0,0，+（d*10）+”）；}）；
var text=svg.selectAll（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.text（函数（d）{返回d[0]+“，“+d[1]；}）
.attr（“x”，函数（d）{return xscale（d[0]）；}）
.attr（“y”，函数（d）{return yscale（d[1]）；}）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）
.attr（“填充”、“红色”）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”+（h-填充）+”）
.呼叫（xAxis）；
});

我刚刚调整了上面的代码。使用下面我发现正确的

它起作用了

var dataset;

d3.csv("t.csv", function(error, d) {
  dataset = d.map(function(d) { return [ +d["t"], +d["Or"] ]; });

您是否收到任何错误消息？你的CSV看起来像什么？我刚刚添加了CSV部分和错误。CSV中的数字（看起来不像CSV，但TSV BTW）被读取为字符串。你需要把它们转换成数字。例如，我使用了d3.csv（“t.csv”，函数（error，d）{dataset=d.map（函数（d）{return[+d[“t”]，+d[”或“]]；}所建议的代码）；现在d3只为一列绘图，而不为另一列绘图，这是我圆圈的r和y值。就csv而言，我将excel文件保存为csv。我提到的上述代码有效，但感谢您的输入。。

var dataset;

d3.csv("t.csv", function(error, d) {
  dataset = d.map(function(d) { return [ +d["t"], +d["Or"] ]; });