javascript - d3 折叠树 - 更新节点可视化

Question

嘿，我正在处理那个例子。在下面观看我修改后的源代码。

根据节点的“启用”属性，它被着色为绿色或红色。

                nodeUpdate.select("circle")
                    .attr("r", 10)
                    .style("fill", function (d) {
                        return d.enabled ? "green" : "red";
                    });

我有另一个 .js 文件用于修改启用的节点属性。更改属性后，我想刷新树的可视化。点击事件正在工作。但我不知道如何在下面的源代码中刷新树。

所以这是我的树小部件的源代码：

define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dojo/_base/array",
"dojo/on",
"ct/_Connect",
"ct/_lang"

],
function (declare, WidgetBase, d_array, on, Connect, ct_lang) {
    return declare([WidgetBase], {
        resize: function (dim) {
            this._tree.size([dim.h, dim.w]);
        },

        postCreate: function () {
            this.inherited(arguments);
            var that = this;

            var d3 = this.d3;
            var mapModel = this.mapModel;
            var div = this.domNode;

            var m = [20, 120, 20, 120],
                w = 900 - m[1] - m[3],
                h = 900 - m[0] - m[2],
                i = 0,
                root;

            var tree = this._tree = d3.layout.tree()
                .size([h, w]);

            var diagonal = d3.svg.diagonal()
                .projection(function (d) {
                    return [d.y, d.x];
                });

            var vis = d3.select(div).append("svg:svg")

                .attr("width", w + m[1] + m[3])
                .attr("height", h + m[0] + m[2])
                .append("svg:g")
                .attr("transform", "translate(" + m[3] + "," + m[0] + ")");


            // var myjson for treedata


            var myjson = traverseTree(mapModel.getRoot(), {});


            function traverseTree(node) {
                var resultChildren = [];     
                var resultEnabled = node.get("enabled");


                var children = node.get("children");  
                if (children && children.length) {
                    d_array.forEach(
                        children,          // 1.Parameter
                        function (child) {      // 2. Parameter von forEach Funktion
                             resultChildren.push(traverseTree(child));   
                        }
                    );
                }

                return {
                    name: node.id,  // gebe "name : node.id" zurrück
                    children: resultChildren, 
                    enabled: resultEnabled
                };


            }


            root = myjson;
            root.x0 = h / 2;
            root.y0 = 0;


            function toggleAll(d) {
                if (d.children) {
                    d.children.forEach(toggleAll);
                    toggle(d);
                }
            }

            // Initialize the display to show a few nodes.
            root.children.forEach(toggleAll);
            toggle(root);


            update(root);


            function update(source) {
                var duration = d3.event && d3.event.altKey ? 5000 : 500;

                // Compute the new tree layout.
                var nodes = tree.nodes(root).reverse();

                // Normalize for fixed-depth.
                nodes.forEach(function (d) {
                    d.y = d.depth * 180;
                });

                // Update the nodes…
                var node = vis.selectAll("g.node")
                    .data(nodes, function (d) {
                        return d.id || (d.id = ++i);
                    });

                // Enter any new nodes at the parent's previous position.
                var nodeEnter = node.enter().append("svg:g")
                    .attr("class", "node")
                    .attr("transform", function (d) {
                        return "translate(" + source.y0 + "," + source.x0 + ")";
                    })

                    //click once
                    .on("click", function (d) {
                        toggle(d);
                        update(d);

                        that.onNodeClick(d);


                    })

                    //connect p


                    //click twice
                    .on("dblclick", function (d) {
                        console.log("TEST FOR DOUBLECLICK");
                    });


                nodeEnter.append("svg:circle")

                    .attr("r", 1e-6)
                    .style("fill", function (d) {
                        return d._children ? "lightsteelblue" : "#fff";
                    });


                nodeEnter.append("svg:text")
                    .attr("x", function (d) {
                        return d.children || d._children ? -10 : 10;
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", function (d) {
                        return d.children || d._children ? "end" : "start";
                    })
                    .text(function (d) {
                        return d.name;
                    })
                    .style("fill-opacity", 1e-6);


                // Transition nodes to their new position.
                var nodeUpdate = node.transition()
                    .duration(duration)
                    .attr("transform", function (d) {
                        return "translate(" + d.y + "," + d.x + ")";
                    });

                nodeUpdate.select("circle")
                    .attr("r", 10)
                    .style("fill", function (d) {
                        return d.enabled ? "green" : "red";
                    });

                nodeUpdate.select("text")
                    .style("fill-opacity", 1)


                // Transition exiting nodes to the parent's new position.
                var nodeExit = node.exit().transition()
                    .duration(duration)
                    .attr("transform", function (d) {
                        return "translate(" + source.y + "," + source.x + ")";
                    })
                    .remove();

                nodeExit.select("circle")
                    .attr("r", 1e-6);


                nodeExit.select("text")
                    .style("fill-opacity", 1e-6);

                // Update the links…
                var link = vis.selectAll("path.link")
                    .data(tree.links(nodes), function (d) {
                        return d.target.id;
                    });

                // Enter any new links at the parent's previous position.
                link.enter().insert("svg:path", "g")
                    .attr("class", "link")
                    .attr("d", function (d) {
                        var o = {x: source.x0, y: source.y0};
                        return diagonal({source: o, target: o});
                    })
                    .transition()
                    .duration(duration)
                    .attr("d", diagonal);

                // Transition links to their new position.
                link.transition()
                    .duration(duration)
                    .attr("d", diagonal);

                // Transition exiting nodes to the parent's new position.
                link.exit().transition()
                    .duration(duration)
                    .attr("d", function (d) {
                        var o = {x: source.x, y: source.y};
                        return diagonal({source: o, target: o});
                    })
                    .remove();

                // Stash the old positions for transition.
                nodes.forEach(function (d) {
                    d.x0 = d.x;
                    d.y0 = d.y;
                });
            }

            // Toggle children.
            function toggle(d) {
                if (d.children) {
                    d._children = d.children;
                    d.children = null;
                } else {
                    d.children = d._children;
                    d._children = null;
                }
            }

        },
        onNodeClick: function (e) {
        }

    });
});

所以我的问题是：如何在更改节点属性后修改我的树（更新/刷新/其他）？

换句话说：我想在我的代码示例中这样做。