D3.js 根据 JSON 值将圆添加到 GROUP

Question

这里我得到 json 数据作为

{
"nodes": [{
    "name": "Tomcat",
    "comp_type": "tomcat_155:7077",
    "id": "tomcat_155:7077",
    "pie": true,
    "url": "../images/component_icons/1424962275_f-server_128.svg",
    "group": 1,
    "fixed": true
}, {
    "name": "lraj_155_Nov_3(MS SQL)",
    "comp_type": "192.168.11.212:1433_Ba",
    "id": "lraj_155_Nov_3(MS SQL)",
    "pie": false,
    "url": "../images/component_icons/1424962160_19.svg",
    "group": 2,
    "fixed": true
}, {
    "name": "rajesh_window",
    "comp_type": "192.234.11.116:1433_window",
    "id": "rajesh_window",
    "pie": false,
    "url": "../images/component_icons/1424882359_database.svg",
    "group": 3,
    "fixed": true
}, {
    "name": "shanker_ux_win_3(PS)",
    "comp_type": "192.168.11.116:1433_window",
    "pie": true,
    "id": "shanker_ux_win_3(PS)",
    "url": "../images/component_icons/1424882359_database.svg",
    "group": 4,
    "fixed": true
}],
"links": [{
    "source": 1,
    "target": 0,
    "description": "windows flows",
    "value": 1
}, {
    "source": 2,
    "description": "SQLMS(36.67%)",
    "target": 0,
    "value": 8
}, {
    "source": 1,
    "description": "",
    "target": 0,
    "value": 8
}, {
    "source": 3,
    "target": 2,
    "description": "ctrix 6765",
    "value": 1
}]

}

每个节点包含PIE 是真还是假。因此，当我渲染 d3 强制布局时，如果 PIE 为真，则必须将圆圈附加到组中，否则无需附加圆圈。

请帮帮我。提前致谢。

Answer 1

您可以使用过滤器来完成此操作。例如，假设您为每个数据附加了一个 g 元素，并且只为那些 pie == true:

的数据添加了圆圈

d3.selectAll("g").data(json.nodes)
  .enter().append("g")
  .filter(function(d) { return d.pie; })
  .append("circle");

D3.js 根据 JSON 值将圆添加到 GROUP

D3.js append circle to the GROUP based on the JSON value

javascript

d3.js