Question

我已经成功构建了d3.js可折叠的拖放树，我想添加一个限制功能以限制将节点拖放到我已经完成此功能的某些选定节点，我想要更改所选的样式/类节点是否受限制。

if (selectedNode) {
                if ((selectedNode.id != 5) || (draggingNode.id != 1)) {
                    // now remove the element from the parent, and insert it into the new elements children
                    var index = draggingNode.parent.children.indexOf(draggingNode);
                    if (index > -1) {
                        draggingNode.parent.children.splice(index, 1);
                    }
                    if (typeof selectedNode.children !== 'undefined' || typeof selectedNode._children !== 'undefined') {
                        if (typeof selectedNode.children !== 'undefined') {
                            selectedNode.children.push(draggingNode);
                        } else {
                            selectedNode._children.push(draggingNode);
                        }
                    } else {
                        selectedNode.children = [];
                        selectedNode.children.push(draggingNode);
                    }
                    // Make sure that the node being added to is expanded so user can see added node is correctly moved
                    expand(selectedNode);
                    sortTree();
                    endDrag();
                }
                else { var k= d3.select(selectedNode); return; endDrag(); }
            } else {
                endDrag();
            }

我已经对上面的函数进行了更改但是我想更改所选节点的样式，如果它是无效的移动。请建议我如何更改上一节中的圆圈样式

Answer 1

您正在使用的示例只引用了所选节点的数据，而不是DOM元素。这使得访问节点以便能够在其上设置样式有点棘手，但您可以使用D3的数据匹配机制来完成：

var node = svgGroup.selectAll("g.node").data([selectedNode], function(d) { return d.id; });
node.style(...);

更改选定的节点样式，d3.js拖放可折叠树

1 个答案: