d3.js - d3 有条件地添加数据属性

Question

我正在创建一个包含 d3 的表，以供 FooTable jquery plugin 使用这需要标题行中有一些数据属性。但并非所有列都具有所有数据属性，并且想知道是否有办法做到这一点。

通过添加所有可能的数据属性并留出一些空白，这种方法有点有效，但我确信这不是一个好的做法。

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 示例:

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

目前正在获取:

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

想要

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

有什么建议吗？

Answer 1

您不需要调用each() 或filter()...attr() 函数将在内部为您完成此操作。只需使用函数而不是值来调用它，并让该函数返回每个数据所需的值，或者如果特定数据不需要该属性，则返回 null，如下所示:

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

如果您的函数返回 null，则不会添加该属性。您甚至可以通过向函数提供属性名称映射来将多个属性组合到一个调用中，如下所示:

...
.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;
    }
});

或者，如果您像我一样不想输入太多内容，则可以将属性名称列表减少到适当的映射中:

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