d3.js - 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?

question from:https://stackoverflow.com/questions/18205034/d3-adding-data-attribute-conditionally

Answer 1

Seems like a good candidate for .each():

var th = d3.select(selection).select("thead").selectAll("th")
        .data(colspec)
    .enter().append("th")
        .text(function(d) { return d["data-name"]; })
        // now address each item individually
        .each(function(d) {
            var header = d3.select(this);
            // loop through the keys - this assumes no extra data
            d3.keys(d).forEach(function(key) {
                if (key != "data-name")
                    header.attr(key, d[key]);
            });
        });

I often use .each when having a per-item scope makes more sense than trying to figure out a bunch of attributes for each item.

For a short list of attributes, especially if you're worried about extra data in the objects, it's probably easier to loop through the desired keys instead of everything:

        .each(function(d) {
            var header = d3.select(this);
            ['data-class', 'data-hide', 'data-ignore'].forEach(function(key) {
                if (key in d)
                    header.attr(key, d[key]);
            });
        });