title: D3.js How to create just 1 element that is binded to a dataset of multiple data items
body: <p>I have a data set with 5 objects. I'm creating an SVG for EACH of the objects because they need their own svg canvas since I'm drawing a progress completion circle for each of the objects. I need to be able to bind my text elements to my data, however instead of creating 5 text elements for each object, I only want to create 1 text element and set the text field to return the proper index. </p>
  
  <p>How do I have D3 only draw 1 element (but still be binded to my data) instead of drawing 1 element for each object. Code is below:</p>
  
  <pre><code>// Create svg for every data item
      var svg = slideContainer.selectAll("svg").data(data);
      svg.enter()
          .append("svg")
          .attr({
              "data-id": function (d, i) { return i; },
              "class": svgClass
          });
      svg.exit().remove();
  
      var text = svg.selectAll("text").data(data, function (d) { return d.Margin; });
      text.enter()
          .append("text")
              .attr({
                  "data-id": function (d, i) { return i; }
              })
          .text(function (d) {
              return data[$(this).attr("data-id")].Margin;
          });
      text.exit().remove();
      text.transition().duration(750)
                          .attr({
                              "x": 100,
                              "y": 100,
                              "fill": "white",
                              "class": function (d) {
                                  if ($(this).attr("data-id") != $(this).parent().attr("data-id")) {
                                      return "hide";
                                  }
                              },
                              "id": "text"
                          })
                          .text(function (d) {
                              return d.Margin;
                          });
  </code></pre>