데이터를 기반으로 요소를 선택하십시오.

Question

데이터의 내용을 기반으로 특정 요소를 선택해야합니다.

두 개의 셀이있는 표가 있다고 가정하면 Red & Blue입니다. 나는 형태의 데이터를 잔뜩 가지고있다 ["Red", "Blue", "Blue", ... ]

내 질문은 어떻게 일치하는 데이터의 수를 기반으로 적절한 셀을 수정할 수 있습니다. 예를 들어 Blue 5와 Blue 3이있는 경우 Blue 셀은 # 00f의 배경을 50 % 불투명도로 사용하고 빨간색은 30 % 불투명도의 # f00이됩니다.

지금까지 필자는 필터링을 통해 집합의 모든 요소 (예 : selectAll("p")) 또는 하위 섹션을 수정하는 기능 만 보았습니다.

데이터를 기반으로 특정 요소를 선택하는 방법이 있습니까?

Answer 1

나는 가능하면 테이블을 구성 D3를 사용합니다 :

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이 이미 표가 인코딩 된 경우 http://jsfiddle.net/ztGE9/2/

, 각 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']") 같은 속성을 선택하십시오.