title: d3 adding data attribute conditionally
body: <p>I'm creating a table with d3 to be used by the <a href="http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/">FooTable jquery plugin</a> and this requires having some data- attributes in the header row.  But not all columns have all the data attributes and wondering if there is a way to do this.  </p>
  
  <p>This approach sort of works, by adding all the possible data attributes and leaving some blank, but I'm sure it's not good practise.</p>
  
  <pre><code>var th = d3.select(selection).select("thead").selectAll("th")
              .data(colspec)
              .enter().append("th")
              .text(function(d) { return d["data-name"]; })
              .attr("data-class", function(d) {
                  if ("data-class" in d) {
                      return d["data-class"];
                  } else {
                      return "";
                  }
              })
              .attr("data-hide", function(d) {
                  if ("data-hide" in d) {
                      return d["data-hide"];
                  } else {
                      return "";
                  }
              })
              .attr("data-ignore", function(d) {
                  if ("data-ignore" in d) {
                      return d["data-ignore"];
                  } else {
                      return "";
                  }
              })
  
         etc.
  </code></pre>
  
  <p>colspec example:</p>
  
  <pre><code>[{"data-name": "username"}, {"data-name": "Date Joined", "data-hide": "true"}]
  </code></pre>
  
  <p>Currently getting:</p>
  
  <pre><code>  &lt;th data-class="" data-hide="true" data-ignore="" data-type=""&gt;Joined&lt;/th&gt;
  </code></pre>
  
  <p>Want</p>
  
  <pre><code>   &lt;th  data-hide="true" &gt;Joined&lt;/th&gt;
  </code></pre>
  
  <p>Any suggestions?</p>