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?
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.
d3. select selects the first matching element whilst d3. selectAll selects all matching elements. Both functions take a string as its only argument.
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.
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; }, {}));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With