Question

下面是我的d3代码，如果我提及带有数字的数据集，它的效果非常好。但是，当我想从csv文件中获取数据时，它并不接受它。

* ERROR

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>

Answer 1

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

有效

var dataset;

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

无法将csv加载到d3散点图

1 个答案: