title: How to refresh D3 tree, even though data has not changed?
body: <p>I have faced a problem with D3 tree - (only in Safari) when on top of one tree new one is opened in modal window and then closed all nodes become black (they are images originally).</p>
  
  <p>As a workaround I have thought to completely redraw tree as soon as modal window  is closed. But I can not make D3 think that data (which is not actually changing) is new, I have tried to clone data object in order to make it exit() previous data. But it is not working it just draws the same nodes on top of existing ones.</p>
  
  <p><strong>Update</strong> - as was suggested in the comment - I have tried to reproduce the problem I have in a <a href="http://plnkr.co/edit/KI8VR9Zl3KILPMSn2e5t?p=preview" rel="nofollow">Plunker</a>. Try to open modal window few times in Safari - initial tree pictures in nodes will become black.</p>
  
  <pre><code>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);
  
              }
  
  
          }
      }
  }
  </code></pre>