无法将 csv 加载到 d3 散点图答案

【问题标题】：unable to load csv to d3 scatter plot无法将 csv 加载到 d3 散点图
【发布时间】：2014-05-25 14:03:07
【问题描述】：

下面是我的 d3 代码，如果我提到数据集及其数字，它就可以完美运行。但是，当我想从 csv 文件中获取数据时，它不接受它。

*错误

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

下面是 csv 的样子：

t       Or
16610   20635
14920   19532
13131   14814
15882   15745
15769   14993
15989   22557
14895   15387
17915   19758

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

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>

【问题讨论】：

您是否收到任何错误消息？您的 CSV 文件是什么样的？
我刚刚添加了csv部分和错误
CSV 中的数字（看起来不像 CSV，而是 TSV BTW）被读取为字符串。您需要将它们转换为数字。参见例如this example.
我按照link d3.csv("t.csv", function(error, d) { dataset = d.map(function(d) { return [ + d["t"], +d["or"] ]; }); 现在 d3 绘制但对于一列而不是另一列，即我的圈子的 r 和 y 值。就 csv 而言，我将我的 excel 文件保存为 csv。
我提到的上述代码有效，不过感谢您的输入..

标签： javascript csv d3.js

【解决方案1】：

我刚刚调整了上面的代码。使用下面我找到的正确here

成功了

var dataset;

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

【讨论】：