d3有条件地添加数据属性 [英] d3 adding data attribute conditionally

问题描述

我正在使用d3创建一个表，供 FooTable使用jQuery插件，这需要在标题行中具有一些data-属性.但是并非所有列都具有所有数据属性，并且想知道是否有一种方法可以做到这一点.

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

colspec example:

[{"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>

有什么建议吗?

推荐答案

似乎是.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]);
            });
        });

我经常使用.each，因为每个项目的作用域比试图为每个项目找出一堆属性更有意义.

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

这篇关于d3有条件地添加数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！