Question

我必须根据组“节点”或“桥”创建一个具有不同标签的树。但是，我不知道该怎么做，因为我有不同的状态（“过去”，“选中”和“下一步”）。

“courseGroup”由“pastNodesCircles”，“selectedNodeCircle”和“nextNodesCircles”组成

// 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);

the jsfiddle code

谢谢

D3标签在树中的不同组中

0 个答案: