Fatal编程技术网
  • javascript/
  • Javascript 使用d3从数组中动态绘制圆和填充颜色。未定义变量

Javascript 使用d3从数组中动态绘制圆和填充颜色。未定义变量

javascript html d3.js

Javascript 使用d3从数组中动态绘制圆和填充颜色。未定义变量,javascript,html,d3.js,Javascript,Html,D3.js,我已经运行了这个网页，它说加载[x]没有在color.js中定义。我不明白为什么。它看起来像是通过函数访问的简单数组 守则详情如下: load.js * * 我正试图从一个html文件中访问这个文件，它包含在head下面。 我的circle.html代码是： * d3.选择（“正文”）.append（“svg”）.attr（“宽度”，1000）.attr（“高度”，1000） .selectAll（“圆圈”）.data（加载）.enter（）.append（“圆圈”） .attr（“x”，函

我已经运行了这个网页，它说加载[x]没有在color.js中定义。我不明白为什么。它看起来像是通过函数访问的简单数组

守则详情如下:

load.js

*

*

我正试图从一个html文件中访问这个文件，它包含在head下面。 我的circle.html代码是：

*


d3.选择（“正文”）.append（“svg”）.attr（“宽度”，1000）.attr（“高度”，1000）
.selectAll（“圆圈”）.data（加载）.enter（）.append（“圆圈”）
.attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）
.attr（“r”，20）
.attr（“填充”，函数（d，i）{返回颜色（i）；}）；
*

我通过调用color.js指定的函数来填充颜色：

*

功能颜色（k）
{
var总和=0，平均值；
var i；

对于（i=0；iIt看起来像您想要
.attr（“填充”，函数（d，i）{return color（i）；}）；
而不是
.attr（“填充”，函数（d）{return color（d）；}）
@LarsKotthoff:实际上我的程序有点不同。我在那里使用它。为了简单起见，我修改了它。所以现在我添加了我的实际代码，但数据量仍然较少。颜色仍然没有填充。数组定义有问题吗。如果有，为什么？我不确定我是否理解。你对它有什么期望阿彭，到底发生了什么？@Larskothoff：首先，我想知道我的数组加载是否正确。我想根据color.js提到的一些条件自动填充圆圈中的颜色。问题是我无法填充圆圈中的颜色（我最终将在地图上部署）。web控制台声明的错误为“Uncaught TypeError:无法读取未定义的属性“t”。请帮助我！您的循环
for（i=0；i

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>
    <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>



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;
}