1

データの内容に基づいて特定の要素を選択する必要があります。

赤と青の 2 つのセルを含むテーブルがあるとします。フォームのデータがたくさんあります["Red", "Blue", "Blue", ... ]

私の質問は、一致するデータの数に基づいて適切なセルを変更するにはどうすればよいかということです。たとえば、青が 5 つ、赤が 3 つある場合、青のセルの背景は不透明度 50% で #00f になり、赤の背景は不透明度 30% で #f00 になります。

これまでのところ、セット内のすべての要素 (例: selectAll("p")) またはフィルタリングを介してサブセクションを変更する機能しか見たことがありません。

データに基づいて特定の要素を選択する方法はありますか?

4

1 に答える 1

0

可能であれば、d3 を使用してテーブルを作成します: http://jsfiddle.net/ztGE9/2/

var data = [["Red","Blue","Blue"], ["Red"], ["Blue"], ["Red", "Blue"], ["Red", "Blue", "Red"], ["Red","Red","Red","Red","Blue"]];

var table = d3.select("#container").append("table"),
    tbody = table.append("tbody");

var rows = tbody.selectAll("tr")
                .data(data)
                .enter().append("tr");

var cells = rows.selectAll("td")
    .data(function (row) {
        var tally = {Red:0,Blue:0};
        row.forEach(function(item) {
            tally[item]++;
        });
        return ["rgba(255,0,0,"+ tally["Red"]*0.1 +")",
                "rgba(0,0,255,"+ tally["Blue"]*0.1 +")"];
    })
    .enter()
    .append("td")
    .text("foo")
    .style("background-color", function(d) {
        console.log(d);
        return d;
    });

HTML に既にテーブルがエンコードされている場合は、それぞれのテキストを取得し、td正規表現を使用して集計できます。データ自体に基づいて選択する必要はありません。ここを参照してください: http://jsfiddle.net/aKtct/。

var tds = document.getElementsByTagName("td"),
    forEach = Array.prototype.forEach;

forEach.call(tds, function (td) {
    var redMatch = td.textContent.match(/Red/g),
        redCt = redMatch && redMatch.length || 0,
        blueMatch = td.textContent.match(/Blue/g),
        blueCt = blueMatch && blueMatch.length || 0;
    var rgba = redCt ? "rgba(255,0,0," + 0.1 * redCt + ");" :
                       "rgba(0,0,255," + 0.1 * blueCt + ");";
    td.style.cssText += "background-color:" + rgba;
})

本当にデータに基づいて要素を選択したい場合は、カスタム データ属性と のような属性セレクターを使用します$("#td[data-something='RedRedRedBlue']")。

于 2012-09-30T05:24:35.323 に答える