Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3 adding data attribute conditionally

Tags:

d3.js

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?

like image 278
PhoebeB Avatar asked Aug 13 '13 09:08

PhoebeB


People also ask

What is attr in d3?

attr() function is used to set the attribute of the element that is selected. The name of the attribute and value of the attributes are to be set using this function.

What do the select () and selectAll () functions in d3 do?

d3. select selects the first matching element whilst d3. selectAll selects all matching elements. Both functions take a string as its only argument.

What does d3 selectAll return?

selectAll() function in D3. js is used to select all the element that matches the specified selector string. Parameters: This function accepts single parameter HTML tag as a parameter. Return Value: This function returns the selected elements.


1 Answers

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; }, {})); 
like image 184
Ray Waldin Avatar answered Nov 25 '22 22:11

Ray Waldin