42

FooTable jquery プラグインで使用する d3 を使用してテーブルを作成しています。これには、ヘッダー行にいくつかの data- 属性が必要です。しかし、すべての列にすべてのデータ属性があるわけではなく、これを行う方法があるかどうか疑問に思っています。

このアプローチは、可能なすべてのデータ属性を追加して一部を空白のままにすることで機能しますが、良い習慣ではないと確信しています。

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>

助言がありますか？

4

5 に答える 5

63

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;
}, {}));
于 2013-08-15T01:16:04.477 に答える
7

関数を使用して.filter()、属性を設定する必要がある選択のサブセットのみを操作できます。

var th = d3.select(selection).select("thead").selectAll("th")
        .data(colspec)
        .enter().append("th")
        .text(function(d) { return d["data-name"]; });
th.filter(function(d) { return ("data-class" in d); })
        .attr("data-class", function(d) {
            return d["data-class"];
        });
于 2013-08-13T09:52:48.683 に答える