即使数据没有改变，如何刷新 D3 树？

Question

我遇到了 D3 树的问题 - （仅在 Safari 中）当在一棵树的顶部在模式窗口中打开一个新的树然后关闭时，所有节点都变成黑色（它们最初是图像）。

作为一种解决方法，我曾考虑在模式窗口关闭后立即完全重绘树。但我不能让 D3 认为数据（实际上并没有改变）是新的，我试图克隆数据对象以使其退出（）以前的数据。但它不起作用，它只是在现有节点之上绘制相同的节点。

更新 - 正如评论中所建议的 - 我试图重现我在 Plunker 中遇到的问题。尝试在 Safari 中打开模态窗口几次 - 节点中的初始树图片会变黑。

var app = angular.module('plunker', ['mgcrea.ngStrap']);

app.controller('MainCtrl', function ($scope, $modal) {

});

app.directive('tree', tree);

function tree() {
    return {
        restrict: 'E',
        scope: true,
        replace: false,

        link: function (scope, element, attrs) {
            var treeData = [{
                "name": "Top Level",
                "parent": "null",
                "value": 10,
                "type": "black",
                "level": "red",
                "icon": "http://placekitten.com/g/48/48",
                "children": [{
                    "name": "Level 2: A",
                    "parent": "Top Level",
                    "value": 5,
                    "type": "grey",
                    "level": "red",
                    "icon": "http://placekitten.com/g/48/48",
                    "children": [{
                        "name": "Son of A",
                        "parent": "Level 2: A",
                        "value": 5,
                        "type": "steelblue",
                        "icon": "http://placekitten.com/g/48/48",
                        "level": "orange"
                    }, {
                        "name": "Daughter of A",
                        "parent": "Level 2: A",
                        "value": 18,
                        "type": "steelblue",
                        "icon": "http://placekitten.com/g/48/48",
                        "level": "red"
                    }]
                }, {
                    "name": "Level 2: B",
                    "parent": "Top Level",
                    "value": 10,
                    "type": "grey",
                    "icon": "http://placekitten.com/g/48/48",
                    "level": "green"
                }]
            }];

            // ************** Generate the tree diagram    *****************
            var margin = {
                    top: 20,
                    right: 120,
                    bottom: 20,
                    left: 120
                },
                width = 960 - margin.right - margin.left,
                height = 500 - margin.top - margin.bottom;

            var i = 0;

            var tree = d3.layout.tree()
                .size([height, width]);

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

            var svg = d3.select(element[0]).append("svg")
                .attr("width", width + margin.right + margin.left)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform",
                    "translate(" + margin.left + "," + margin.top + ")");

            root = treeData[0];

            update(root);

            function update(source) {

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

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

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

                // Enter the nodes.
                var nodeEnter = node.enter().append("g")
                    .attr("class", "node")
                    .attr("transform", function (d) {
                        return "translate(" + d.y + "," + d.x + ")";
                    });

                var defs = node.append('defs').attr('id', 'imgdefs');

                var roundedCircle = defs.append("pattern")
                    .attr("id", "grump_avatar")
                    // .append("svg:image")
                    // .attr("xlink:href", 'http://placekitten.com/g/48/48')
                    .attr("width", 48)
                    .attr("height", 48)
                // .attr("x", 0)
                // .attr("y", 0);

                roundedCircle.append("image")
                    .attr("xlink:href", function (d) {
                        return d.icon;
                    })
                    // .attr("x", "-12px")
                    // .attr("y", "-12px")
                    .attr("width", "48px")
                    .attr("height", "48px");

                nodeEnter.append("circle")
                    .attr("cx", 48 / 2)
                    .attr("cy", (48 - 40) / 2)
                    .attr("r", 48 / 2)
                    .style('fill-opacity', 1)
                    .attr("fill", "url(#grump_avatar)");

                // Declare the links…
                var link = svg.selectAll("path.link")
                    .data(links, function (d) {
                        return d.target.id;
                    });

                // Enter the links.
                link.enter().insert("path", "g")
                    .attr("class", "link")
                    .style("stroke", function (d) {
                        return d.target.level;
                    })
                    .attr("d", diagonal);

            }


        }
    }
}

Answer 1

现在我已经得到了这样的解决方案 - 每次打开模式时，我都会删除整个 svg (d3.select("svg").remove();) 元素，然后调用另一个函数从一开始就绘制树。