この Web ページを実行したところ、load[x] が color.js で定義されていないと表示されます。理由がわかりませんでした。関数を介してアクセスしている単純な配列のように見えます。
コードの詳細は次のとおりです。
load.js
*
load=
[
{
"name":"flint",
"x":50,
"y":50,
"s":[
{"t":1},
{"t":3},
{"t":5},
{"t":7},
{"t":9},
{"t":2},
{"t":4},
{"t":6}]
},
{
"name":"oyster",
"x":100,
"y":100,
"s":[
{"t":11},
{"t":13},
{"t":15},
{"t":12},
{"t":14},
{"t":16}]
},
{
"name":"eden",
"x":150,
"y":150,
"s":[
{"t":15},
{"t":30},
{"t":51},
{"t":17},
{"t":29},
{"t":21},
{"t":14}]
}
];
*
そして、このファイルを頭の下に含むhtmlファイルからアクセスしようとしています。私のcircle.htmlコードは次のとおりです。
*
<html>
<head>
<script src="d3.v2.min.js" type="text/javascript"></script>
<script src="load.js" type="text/javascript"></script>
<script src="color.js" type="text/javascript"></script>
</head>
<body>
<script>
d3.select("body").append("svg").attr("width",1000).attr("height",1000)
.selectAll("circle").data(load).enter().append("circle")
.attr("x",function(d){return d.x;})
.attr("y",function(d){return d.y;})
.attr("r",20)
.attr("fill",function(d,i){return colour(i);});
</script>
</body>
</html>
*
color.jsで指定されているように、次のように関数を呼び出して色を塗りつぶしています。
*
function colour(k)
{
var sum=0,avg;
var i;
for(i=0;i<=load[k].s.length;i++)
{
sum+=load[k].s[i].t;
}
avg=sum/i;
var returncolour;
if(avg<=10){returncolour="#00FF00";}
//else if(avg>10 &avg<=15){returncolour="#0000FF";}
else {returncolour="#FF0000";}
return returncolour;
}
*