title: d3 match element id to update existing item
body: <p>Based on the first answer I did more research and came up with my solution to the problem.  I am including the update function: The mention of keying the data was useful.</p>
  
  <pre><code>function update(data) {
      var agent = canvas.selectAll(".node.agent")
          //sets all elements to false for the class before the update
          .classed("newCall", false)
         .data(data, function (d) {
             // the key is either an element id or an id from the data
             var myId = d.id ? d.id : this.id;
             //console.log("data key: " + d.id + " element id: " + this.id + " new: " + d.newCall);
             return myId;
         }).classed("newCall", function (d) {
             var f = d.newCall ? d.newCall : false;
             //console.log(this.id + " " + f )
             return f;
         });
  
      agent.enter().append("g")
      .classed("newCall", function (d) {
  
             return d.newCall ? d.newCall : false;
         });
  
      agent.exit().classed("newCall", function (d) {
        //  console.log(d);
          return false;
      });
  
  };
  </code></pre>
  
  <p>I have this html, generated by data using d3.  I have another data source that I want to use to modify that html.  below is the function I want to use to class the elements so I can change them in real time using css.  What I am trying to do is match the id of the element with one generated by the new data. I have the function logging the id of the elements on the canvas. I am not sure how to check the id's against the data passed to the update chart function. The each(d) is the existing data. The data parameter is what I need to do the enter and update on... </p>
  
  <pre><code>function updateChart(data) {
  
     var sel = canvas.selectAll(".agent")
          .each(function (d) {
     // these are the id's I need to check against 
     // the data                
     console.log(d3.select(this).attr("id"));
  
  
          })
  };
  };
  </code></pre>
  
  <p>I found this and it helped me iterate over existing elements:    </p>
  
  <p><a href="https://stackoverflow.com/questions/27405377/iterate-over-already-created-nodes-in-d3js">SO link</a></p>