数据文件出现 D3 错误
D3 error with data file
我正在完成我的计算学位的项目,我对 D3 有问题,基本上如果我将数据直接传递给代码,它就可以工作,但对于文件中的数据,它说"n 不存在"。我不知道为什么会这样,这是我的代码:
PD:如果有人需要我的数据文件样本,请索取。
提前感谢!
<code>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Causa básica</title>
<style>
.axis path, .axis line
{
fill: none;
stroke: #777;
shape-rendering: crispEdges;
}
.axis text
{
font-family: 'Arial';
font-size: 13px;
}
.tick
{
stroke-dasharray: 1, 2;
}
.bar
{
fill: FireBrick;
}
</style>
<svg id="visualisation" width="1000" height="500"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
InitChart();
function InitChart() {
/*
var lineData = [{ //don't know if this is needed in source: <script src="http://d3js.org/d3.csv.js">
'x': 1, //, This is the sample data
'y': 1.0807955e-01
}, {
'x': 2,
'y': 1.2815365e-01
}, {
'x': 3,
'y': 9.3269178e-02
}, {
'x': 4,
'y': 9.3894191e-02
}];*/
var lineData;
d3.tsv("data.tsv", function(data) {
lineData=data //my data, that doesn't work
});
var vis = d3.select("#visualisation"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function (d) {
return d.x;
}),
d3.max(lineData, function (d) {
return d.x;
})
]),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function (d) {
return d.y;
}),
d3.max(lineData, function (d) {
return d.y;
})
]),
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineFunc = d3.svg.line()
.x(function (d) {
return xRange(d.x);
})
.y(function (d) {
return yRange(d.y);
})
.interpolate('basis');
vis.append("svg:path")
.attr("d", lineFunc(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
}
</script>
</code>
异步问题。
函数
d3.tsv("data.tsv", function(data) {
lineData=data //my data, that doesn't work
});
在执行其余代码后调用。
您可以尝试在函数内和lineData=data;
之后移动所有代码。或者构建一个函数:
var lineData;
d3.tsv("data.tsv", function(data) {
seeData(data);
});
function seeData(lineData) {
var vis = d3.select("#visualisation"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
// etc etc
}
相关文章:
- 使用dc.js、d3.js和crossfilter引用错误
- 用d3和numericjs在javascript中绘制错误椭圆
- d3在数据更新时错误地附加了dom元素
- D3-更新时元素数量正确,但值错误
- 为什么我会得到一个“;未捕获类型错误”;当我介绍D3.transition()时
- d3.js带缩放的多线图:线错误
- 使用可排序表时出现d3.v3错误
- D3未捕获类型错误:path.data不是函数
- 将多边形添加到d3 vornoi导致错误
- D3 Json请求获取XmlHttpRequest错误:访问控制允许原点不允许原点为null
- d3.js voronoi.clipExtent()返回错误:undefined不是函数
- D3.js 制作树时的 json 错误
- 数据文件出现 D3 错误
- 将水平线添加到 d3 图形以错误的值显示
- 使用 d3 导入.csv数据错误:404:未找到错误
- D3 JS - 未捕获的类型错误:无法读取未定义的属性“长度” - 似乎与数据问题有关
- 尝试使用 d3.time.format 格式化日期时,我收到 JavaScript 错误“d.getMonth 不是一个
- 未定义 D3 错误数据
- D3错误:NotFoundError:未找到节点
- d3错误:
属性d:期望号码日期