d3。根据数组内容更改节点的颜色

Question

我与d3 合作了几天。我选择了collapse tree 来展示另一个项目的层结构。这个例子中的d3 函数正是我的。我所做的唯一更改是要求我的项目中的节点在树中显示它们，而不是使用flare.json。

所以我询问了状态（是否启用）。请参阅下面的代码。如果启用了层，则节点的圆圈应为绿色。如果未启用，则节点的圆圈应为红色。状态被赋予一个数组。

var statusarray = [];
for (i = 0; i < operational.children.length; i++ ) {

    //var status to save children enabled-status at [i]
    var status = operational.children[i].get("enabled");

    //test output for operational.children at [i]
    console.log(operational.children[i].id + " steht auf " + status) ;

    //Create Array (statusarray) for status with length of operational children (saves true and false)
    statusarray[i] = status;
}

数组是这样构建的：[true, true, true, false, true , false ....]

有了这些数据，我想操纵适合属性的圆圈。

编辑：

我在java-script中的数据保存在这里：

  var myjson = {
                    "name": main.id,
                    "children": [
                        {
                            "name": glasspane.id,
                            "children": [
                            ]
                        },
                        {
                            // get id of operational layer
                            "name": operational.id,
                            "children": [
                            ]
                        },
                        {
                            "name": base.id,
                            "children": [
                            ]
                        }
                    ]
                };

我开始填写：

 for (i = 0 ; i < main.children.length; i++) {
                 // Array for children from root
                   var layer = main.children;
                 // Create childrn from Layers in Arrays and fill myjson with them
                   d_array.forEach(layer[i].children, function (ArrayElement) {
                       myjson.children[i].children.push({"name": ArrayElement.id});
                   }, this);
                  }

感谢任何帮助！！！

Answer 1

你甚至不需要额外的数组，你可以简单地做

nodeEnter.append("circle")
  .attr("r", 1e-6)
  .style("fill", function(d) {
    return d.enabled ? "green" : "red";
});

编辑：如果确实需要额外的数组，可以使用索引进行交叉引用。

nodeEnter.append("circle")
  .attr("r", 1e-6)
  .style("fill", function(d, i) {
    return statusarray[i] ? "green" : "red";
});