d3 adding data attribute conditionally

Question

I'm creating a table with d3 to be used by the FooTable jquery plugin 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.

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.

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. 

colspec example:

[{"data-name": "username"}, {"data-name": "Date Joined", "data-hide": "true"}] 

Currently getting:

  <th data-class="" data-hide="true" data-ignore="" data-type="">Joined</th> 

Want

   <th  data-hide="true" >Joined</th> 

Any suggestions?

Answer 1

You don't need to call each() or filter()... The attr() function will do this for you internally. Just call it with a function instead of a value, and have that function return the desired value for each datum, or null if the attribute is not desired for a particular datum, like so:

... .attr('data-class', function(d) {     return 'data-class' in d ? d['data-class'] : null; }); 

If your function returns null, the attribute is not added. You can even combine several attributes into one call by providing a map of attr names to functions like so:

... .attr({     'data-class': function(d) {         return 'data-class' in d ? d['data-class'] : null;     },      'data-hide': function(d) {         return 'data-hide' in d ? d['data-hide'] : null;     },     'data-ignore': function(d) {         return 'data-ignore' in d ? d['data-ignore'] : null;     } }); 

or if you're like me and would rather not type so much, you can reduce the list of attribute names into the appropriate map:

... .attr(['data-class', 'data-hide', 'data-ignore'].reduce(function(result, attr) {     result[attr] = function(d) {         return attr in d ? d[attr] : null;     }     return result; }, {}));