Javascript 树中不同组中的D3标签
我必须根据组“节点”或“桥”创建一个具有不同标签的树。然而,我不知道怎么做,因为我有不同的状态(“过去”、“选定”和“下一个”) “courseGroup”由“PasstNodesCircles”、“selectedNodeCircle”和“nextNodesCircles”组成 谢谢Javascript 树中不同组中的D3标签,javascript,html,d3.js,svg,label,Javascript,Html,D3.js,Svg,Label,我必须根据组“节点”或“桥”创建一个具有不同标签的树。然而,我不知道怎么做,因为我有不同的状态(“过去”、“选定”和“下一个”) “courseGroup”由“PasstNodesCircles”、“selectedNodeCircle”和“nextNodesCircles”组成 谢谢 // Init SVG elements in DOM // ========= Groups ======== // Global container for nextNodes, pastNodes an
// Init SVG elements in DOM
// ========= Groups ========
// Global container for nextNodes, pastNodes and selectNode
var courseGroup = container.append("g")
.attr("class", "course--container");
// Global container for bridgeNodes
var bridgeGroup = container.append("g")
.attr("class", "bridge--container");
// Left container for bridgeNodes in bridgeGroup
var bridgeLeftGroup = bridgeGroup.append("g")
.attr("class", "bridge--container__left");
// Right container for bridgeNodes in bridgeGroup
var bridgeRightGroup = bridgeGroup.append("g")
.attr("class", "bridge--container__right");
// ========= Nodes ========
selectedNodeCoordinates(selectedNode[0]);
var selectedNodeCircle =
courseGroup.selectAll(".selected-node")
.data(selectedNode)
.enter()
.append("circle")
.attr("class", "selected-node")
.attr("r", radius)
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
nextNodesCoordinates(nextNodes, selectedNode[0], width/4);
var nextNodesCircles =
courseGroup.append("g")
.attr("class", "group--next-node")
.selectAll(".next-node")
.data(nextNodes)
.enter()
.append("circle")
.attr("class", "next-node")
.attr("r", radius)
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
pastNodesCoordinates(pastNodes, selectedNode[0], littleRadius);
var pastNodesCircles =
courseGroup.append("g")
.attr("class", "course--past-node")
.selectAll(".past-node")
.data(pastNodes)
.enter()
.append("circle")
.attr("class", "past-node")
.attr("r", littleRadius)
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y * 1.1; });
bridgeNodesAppend(bridgeNodes, selectedNode[0], 100, bridgeLeftGroup,
bridgeRightGroup);