无法将CSV加载到D3 [英] unable to load csv to d3
问题描述
我尝试了多个教程，并研究了先前的问题，但是将csv加载到d3仍然存在问题，因为所有材料都使用不同的方法。
数据集xyz.csv看起来像这样
xvalue，yvalue
30,20
50,30
70,10
这是经过几个小时无法使用的代码：
第一个块：
<！DOCTYPE html>
< html>
< head>
< script src = http://d3js.org/d3.v3.min.js charset = utf-8< / script>
< script type = text / javascript>函数draw（data）{
var margin = 50，
width = 700，
height = 300，
x_extent = d3.extent（data ，function（d）{return d.xvalue}），
y_extent = d3.extent（data，function（d）{return d.yvalue}）;
var x_scale = d3.scale.linear（）
.range（[margin，width-margin]）
.domain（x_extent）
var y_scale = d3.scale.linear（）
.range（[height-margin，margin]）
.domain（y_extent）
var x_axis = d3.svg.axis （）.scale（x_scale）
var y_axis = d3.svg.axis（）。scale（y_scale）.orient（'left'）
d3.select（ body）
.append（'svg'）
.attr（'width'，width）
.attr（'height'，height）
.selectAll（'circle' ）
.data（data）
.enter（）
.append（'circle'）
.attr（'cx'，function（d）{return x_scale（d。 xvalue）}）
.attr（'cy'，function（d）{return y_scale（d.yvalue）}）
.attr（'r'，5）
}
< / script>
然后
< body>
< script>
d3.csv（ xyz.csv，平局）；
< / script>
< / body>
< / html>
为初学者绑定CSV的一些简单方法是什么？
这在某种程度上取决于您使用的d3版本。 d3 v5 使用访存API并返回一个需要以下代码的Promise。
d3.csv（'yourcsv.csv'）.then（function（data）{//数据现在是整个数据集// //在此处绘制图表！}）
<另一方面，p> d3 v4 使用xmlhttp方法，并且不会返回要求此操作的承诺代码
d3.csv（'yourcsv.csv'，function（data） {//整个数据集//在此处绘制图表}）
csv加载是异步的，因此请确保在csv函数中运行图表代码。
I tried multiple tutorials and looked into prior questions yet still have issue loading csv to d3, as all of materials use a different methods.
The dataset xyz.csv looks like this
xvalue,yvalue
30,20
50,30
70,10
And here's the code that won't work after trying for hours:
the first chunk:
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript"> function draw(data) {
var margin = 50,
width = 700,
height = 300,
x_extent = d3.extent(data, function(d){return d.xvalue}),
y_extent = d3.extent(data, function(d){return d.yvalue});
var x_scale = d3.scale.linear()
.range([margin,width-margin])
.domain(x_extent)
var y_scale = d3.scale.linear()
.range([height-margin, margin])
.domain(y_extent)
var x_axis = d3.svg.axis().scale(x_scale)
var y_axis = d3.svg.axis().scale(y_scale).orient('left')
d3.select("body")
.append('svg')
.attr('width', width)
.attr('height', height)
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', function(d){return x_scale(d.xvalue)})
.attr('cy', function(d){return y_scale(d.yvalue)})
.attr('r', 5)
}
</script>
Then
<body>
<script>
d3.csv('xyz.csv', draw);
</script>
</body>
</html>
What are some of the easy ways to bind csv for beginners? thanks.
This depends slightly on which version of d3 you are using. d3 v5 uses the fetch API and returns a promise requiring the below code.
d3.csv('yourcsv.csv')
.then(function(data) {
// data is now whole data set
// draw chart in here!
})
d3 v4 on the other hand uses the xmlhttp method and does not return a promise requiring this code
d3.csv('yourcsv.csv', function(data) {
//whole data set
// draw chart here
})
csv loading is async so make sure to run your chart code within the csv function.
这篇关于无法将CSV加载到D3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
