d3js：未捕获的TypeError：无法读取未定义的属性“长度”
[英]d3js: Uncaught TypeError: Cannot read property 'length' of undefined
问题描述
I am a newbie to d3. 
我是d3的新手。 I'm pretty sure there is not an issue with my data. 我很确定我的数据没有问题。 Any point in the right direction would be appreciated. 朝正确方向的任何观点将不胜感激。
(function() {
d3.json("data.json", function(error, json){
if(error) return console.warn(error);
data = json;
var format = d3.time.format("%a %b %d %Y")
var amountFn = function(d){return d.amount}
var dateFn = function(d){
console.log(d.bonus);
return format.parse(d.date)
}
var x = d3.time.scale()
.range([10, 280])
.domain(d3.extent(data, dateFn));
var y = d3.scale.linear()
.range([180, 10])
.domain(d3.extent(data, amountFn));
var svg = d3.select('#demo').append("svg:svg")
.attr("width", 300)
.attr("height", 200)
svg.selectAll("circle").data(data).enter()
.append("svg:circle")
.attr("r", 4)
.attr("cx", function(d){return x(dateFn(d.draw_date))})
.attr("cy", function(d){return y(amountFn(d))})
});
})();
my data being retrieved is in the following formats. 我正在检索的数据采用以下格式。
[
{
"date": "2015-08-26T00:00:00",
"amount": "30"
},
...more data
]
2 个解决方案
解决方案1
2 2015-09-03 08:27:56
Actually you are doing many Silly minor mistakes here. 实际上，您在这里犯了许多愚蠢的小错误。 with D3.js you must need to understand data structure. 使用D3.js，您必须了解数据结构。
In Your code i found many mistakes. 在您的代码中，我发现了许多错误。
1. you stored your json in a variable which names data where you did'nt initialize it but it's ignore by javascript. 1.您将json存储在一个变量中，该变量为您未初始化的数据命名，但是javascript会忽略它。
2. you passing in console.log(d.bonus); 2.您传入console.log（d.bonus）; this key is not exist in your json so it's value showing as "undefned" . 此密钥在您的json中不存在，因此其值显示为“ undefned” 。 when you watching you console. 当您观看控制台时。
3. for your json data you need to convert d.date to date Object. 3.对于您的json数据，您需要将d.date转换为date对象。
4. you already wrap your keys in x and y so you just need to pass 4.您已经将密钥包装在x和y中，因此您只需要传递
.attr("cx", function(d){ return x(d.date); })
.attr("cy", function(d){return y(d.amount); })
instead of 代替
.attr("cx", function(d){return x(dateFn(d.draw_date))})
.attr("cy", function(d){return y(amountFn(d))})
So i fix Some Errors in your code you can test this code by running on your system: 因此，我修复了代码中的一些错误，可以通过在系统上运行来测试此代码：
My HTML: 我的HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>
<div class = "container">
<div class="row">
<div class="col-md-12">
<div class = "panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">D3 Test Example</h3>
</div>
<div class="panel-body">
<div id="demo"></div>
<div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/d3.v3.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
my Script code is here.. 我的脚本代码在这里。
(function() {
d3.json("data.json", function(error, json){
if(error) return console.warn(error);
var data = json; // you store your json in data variable here..
var format = d3.time.format("%a %b %d %Y").parse; // you don't need to this...
var amountFn = function(d){return d.amount; };
data.forEach(function(d){
d.date = new Date(d.date); // you convert your d.date value in date string Object
d.amount = d.amount;
});
var dateFn = function(d){
return d.date;
}
var x = d3.time.scale()
.range([10, 280])
.domain(d3.extent(data, dateFn));
var y = d3.scale.linear()
.range([180, 10])
.domain([0, d3.max(data, amountFn)]);
var svg = d3.select('#demo').append("svg:svg")
.attr("width", 300)
.attr("height", 200)
svg.selectAll("circle").data(data).enter()
.append("svg:circle")
.attr("r", 4)
.attr("cx", function(d){ return x(d.date); })
.attr("cy", function(d){return y(d.amount); })
});
})();
I used this data.. 我用了这些数据。
[ { "date": "2015-08-24T00:00:00", "amount": "30" },{ "date": "2015-08-25T00:00:00", "amount": "40" },{ "date": "2015-08-26T00:00:00", "amount": "50" },{ "date": "2015-08-27T00:00:00", "amount": "60" },{ "date": "2015-08-28T00:00:00", "amount": "70" },{ "date": "2015-08-29T00:00:00", "amount": "80" },{ "date": "2015-08-30T00:00:00", "amount": "90" },{ "date": "2015-08-31T00:00:00", "amount": "100" } [{“ date”：“ 2015-08-24T00：00：00”，“ amount”：“ 30”}，{“ date”：“ 2015-08-25T00：00：00”，“ amount”：“ 40 “}，{” date“：” 2015-08-26T00：00：00“，” amount“：” 50“}，{” date“：” 2015-08-27T00：00：00“，” amount“： “ 60”}，{“ date”：“ 2015-08-28T00：00：00”，“ amount”：“ 70”}，{“ date”：“ 2015-08-29T00：00：00”，“ “：” 80“}，{” date“：” 2015-08-30T00：00：00“，” amount“：” 90“}，{” date“：” 2015-08-31T00：00：00“， “ amount”：“ 100”}
] ]
I hope this is the answer of your Question. 希望这是您的问题的答案。 So my output is here... 所以我的输出在这里...
解决方案2
0 2015-09-03 04:50:35
There are two errors in your code. 您的代码中有两个错误。
In the format string, you have to add all the fields you're supplying to the format string.
在格式字符串中，您必须将要提供的所有字段添加到格式字符串中。 So you should use d3.time.format("%Y-%m-%dT%H:%M:%S");因此，您应该使用d3.time.format("%Y-%m-%dT%H:%M:%S");instead ofd3.time.format("%a %b %d %Y").而不是d3.time.format("%a %b %d %Y")。The
dateFnfunction expects an object as parameter and not the date string.dateFn函数需要一个对象作为参数，而不是日期字符串。 So replacex(dateFn(d.draw_date))withx(dateFn(d)).因此将x(dateFn(d.draw_date))替换为x(dateFn(d))。
Here is the working code snippet. 这是工作代码段。
var data = [{ "date": "2015-08-26T00:00:00", "amount": "30" }, { "date": "2015-07-26T00:00:00", "amount": "40" }]; var format = d3.time.format("%Y-%m-%dT%H:%M:%S"); var amountFn = function(d) { return d.amount }; var dateFn = function(d) { console.log(d.bonus); return format.parse(d.date) } var x = d3.time.scale() .range([10, 280]) .domain(d3.extent(data, dateFn)); var y = d3.scale.linear() .range([180, 10]) .domain(d3.extent(data, amountFn)); var svg = d3.select('#demo').append("svg:svg") .attr("width", 300) .attr("height", 200) svg.selectAll("circle").data(data).enter() .append("svg:circle") .attr("r", 4) .attr("cx", function(d) { return x(dateFn(d)) }) .attr("cy", function(d) { return y(amountFn(d)) })
div{ height: 800px; width: 1200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="demo"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.