基于数据的元素选择

我需要根据数据的内容选择特定的元素。基于数据的元素选择

假设我有两个单元格的表格，红色&蓝色。我有一堆表格的数据["Red", "Blue", "Blue", ... ]

我的问题是如何根据匹配数据的数量修改适当的单元格。例如，如果有5个蓝色和3个红色，蓝色单元的背景为＃00f，不透明度为50％，红色为＃f00，不透明度为30％。

到目前为止，我只看到通过过滤修改集合中所有元素（例如，selectAll("p")）或甚至子部分的功能。

有没有办法根据数据选择特定的元素？

2012-09-27 Jesse Kaunisviita

我会用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; 
})

如果你真的想基于数据选择元素，使用custom data attributes和属性选择像$("#td[data-something='RedRedRedBlue']")。

来源

2012-09-30 05:24:35 ZachB

基于数据的元素选择

回答

相关问题