Json 随机散射分组圆

我读了很多关于d3.js的书，但每次我尝试基于示例项目做一些新的事情时，它都会停止工作。最新的一个基于Jerome Cukier关于嵌套数据（）的示例

在这个当前的项目中，我在矩形中随机地有一个困难的时间散射圆，没有使用json数据作为转换函数。除此之外，一切都很顺利。如果有人给我一些线索，我真的很感激

下面是json数据和脚本

mydata.json

 [

{ "stat": "ok",
        "id": "VR01",
        "servername": "Server_1",
        "cpu": 45, "mem": 25,
        "diskIO": 0, "bandwith": 200



}, { "stat": "attention",
        "id": "VR02",
        "servername": "Server_02",
        "cpu": 55, "mem": 35,
        "diskIO": 1, "bandwith": 2000


}, { "stat": "warning",
        "id": "VR03",
        "servername": "Server_03",
        "cpu": 98, "mem": 85,
        "diskIO": 1,
        "bandwith": 2000

}, { "stat": "dead",
        "id": "VR04",
        "servername": "Server_04",
        "cpu": 0, "mem": 0,
        "diskIO": 0,
        "bandwith": 0 }, { "stat": "ok",
        "id": "VR05",
        "servername": "Server_05",
        "cpu": 45, "mem": 25,
        "diskIO": 0, "bandwith": 200

}, { "stat": "attention",
        "id": "VR06",
        "servername": "Server_06",
        "cpu": 55, "mem": 35,
        "diskIO": 1, "bandwith": 2000


}, { "stat": "warning",
        "id": "VR07",
        "servername": "Server_07",
        "cpu": 98, "mem": 85,
        "diskIO": 1,
        "bandwith": 2000

}, { "stat": "dead",
        "id": "VR08",
        "servername": "Server_08",
        "cpu": 0, "mem": 0,
        "diskIO": 0,
        "bandwith": 0 }    
]

及

可变宽度=900，
高度=300，
保证金=50；
var cwidth=400，cheight=300，cmargin=10，maxr=10；
var svg=d3.选择（“.svg_元素”）.追加（“svg”）；
var x=10；
变量y=10；
VarO=10；
//var状态=[“正常”、“注意”、“警告”、“死亡”]；
var数据；
d3.json（“mydata.json”，函数（json）{
data=d3.nest（）
.键（功能（d）{
返回d.stat；
})
.排序键（d3.降序）
.条目（json）；
//每个大陆一个细胞
var g=svg.selectAll（“g”）.data（data）.enter（）
.附加（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（“+（400*i）+”，1）”；
});
//我们添加了一个带有title元素的rect元素
//所以鼠标在细胞上移动会告诉我们它是哪个大陆
G
.append（“rect”）
.attr（“x”，cmargin）
.attr（“y”，cmargin）
.attr（“宽度”，cwidth-2*cmargin）
.attr（“高度”，切特-2*cmargin）
.附加（“标题”）
.文本（功能（d）{
返回d.key；
});
//我们也把它的名字写在下面。
G
.append（“文本”）
.attr（“y”，切特+10）
.attr（“x”，cmargin）
.文本（功能（d）{
返回d.key；
});
//现在标记，初始化为默认值
g、 全选（“圆圈”）
//我们得到了如下国家的价值观：
.数据（功能（d）{
返回d值；
})
.输入（）
.附加（“圆圈”）
.attr（“cx”，cmargin）
.attr（“cy”，cheight-cmargin）
.attr（“r”，5）
//加入标题元素
.附加（“标题”）
.文本（功能（d）{
返回d.servername；
});
//最后，我们将标记设置为动画
//这里是我在没有使用json数据的情况下将圆放入矩形时遇到问题的地方
g、 选择All（“圆圈”）.transition（）.持续时间（100）
.attr（“r”，10）
.attr（“cx”，功能（d）{
返回x（+d.cpu）；
})
.attr（“cy”，函数（d）{
返回y（+d.mem）；
})
.样式（“不透明度”，函数（d）{
返回o（d.diskIO）；
})
.样式（“不透明度”，函数（d）{
返回o（+d.bandwith）；
});
});

在生成随机位置时，需要考虑要生成的矩形的尺寸。除此之外，它应该是直截了当的：

.attr("cx", function(d) {
        return cmargin + Math.random() * (cwidth - cmargin);
    })
.attr("cy", function(d) {
        return cmargin + Math.random() * (cheight - cmargin);
    });

---

完整示例。

您看到了吗？您好，我在顶部添加了node变量，如nodes=d3.range（200）.map（函数（）{return{radius:Math.random（）*12+4，cx:Math.random（）*cwidth-50，cy:Math.random（）*cheight-50}；}）；g、 选择所有（“圆”）.data（函数（d）{return d.values；}）.enter（）.append（“圆”）.attr（“cx”，nodes[i].cx）.attr（“cy”，nodes[i].cy）.attr（“r”，nodes[i].radius）.attr（“fill”，function（）{return“hsl（“+Math.random（）*360+”，100%，75%）”；}）.append（“title”）.text（函数（d）{return d.servername；}）；因为d3中的for循环相当于。仍然输入no luckw当你说“no luck”时，你的意思是什么？它在一个矩形（g）中随机创建一个圆，我想要的是创建一个圆圈，代表嵌套组中的一台服务器，而这些服务器随机分散在矩形中，但精确的数字基于json数据，如示例项目

.attr("cx", function(d) {
        return cmargin + Math.random() * (cwidth - cmargin);
    })
.attr("cy", function(d) {
        return cmargin + Math.random() * (cheight - cmargin);
    });