title: Match SVG text element id with data id using D3
body: <p>I have a bunch of SVG text elements with their ids:</p>
  
  <pre><code>&lt;text id = "id1"&gt;text1&lt;/text&gt;
  &lt;text id = "id2"&gt;text2&lt;/text&gt;
  &lt;text id = "id3"&gt;text3&lt;/text&gt;
  ...
  &lt;text id = "abc1"&gt;textABC1&lt;/text&gt;
  &lt;text id = "abc2"&gt;textABC2&lt;/text&gt;
  &lt;text id = "abc3"&gt;textABC3&lt;/text&gt;
  </code></pre>
  
  <p>And data comming from websocket:</p>
  
  <pre><code>var data = [{"id": "id1", "val":1}, {"id": "id2", "val":2}, {"id": "id3", "val":3}];
  </code></pre>
  
  <p>So I need to update texts (with val property) in text elements but only for elements that matches id = id* (not for abc* ids)</p>
  
  <p>I try to use this:</p>
  
  <pre><code>d3.selectAll("text")
      .data(data, function(d) { 
          return this.id = d.id; 
      })
      .text(function(d) { 
          return d.val;
      });
  </code></pre>
  
  <p>but as I can see the logic here is that the number of elements in the data array should match the number of elements in the selection</p>