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脚本中的数据保存在这里：

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

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

1 个答案: