D3テーブルの作成。 else文は目のために働いているが、TD

のために、私はヨナのテーブルに基づいて、対話型のテーブルを作成していない場合：http://bl.ocks.org/jonahwilliams/cc2de2eedc3896a3a96d D3テーブルの作成。 else文は目のために働いているが、TD

私は緑色の着色するための一定の基準を満たす細胞と適合しないものが欲しいです基準は赤色になります。スイッチは左上隅に置かれたセレクタメニューです。私がこのセルを "th"というコードで実行すると、すべてうまく動作しますが、tbodyセル "td"の場合は動作しません。

<!DOCTYPE html> 
<meta charset="utf-8"> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<style> 
#table-location { 
    margin-left: 0; 
    margin-right: auto; 
    width: 70%; 
} 
</style> 
</head> 
<body> 
    <select id="selector"></select> 
    <div id="table-location"></div> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <script> 
// var svg = d3.select("body").append("svg") 
// .attr("height", 1) 
// .attr("width", 19); 

var table = d3.select("#table-location") 
    .append("table") 
    .attr("class", "table table-condensed table-striped"), 
    thead = table.append("thead"), 
    tbody = table.append("tbody"); 


d3.tsv("VotingInformationTable.tsv", function(error, data2){ 

// } 
    // // filter year 
    // var data1 = data2.filter(function(d){return d.Year == '2010';}); 
    // // Get every column value 
    var columns = Object.keys(data2[0]); 
    // .filter(function(d){ 
    //  return ((d != "Year")); 
    // }); 

    var header = thead.append("tr") 
     .selectAll("th") 
     .data(columns) 
     .enter() 
     .append("th") 
      .text(function(d){ return d;}) 
      .on("click", function(d){ 
       if (d == "Year"){ 
        rows.sort(function(a, b) { 
         if (a[d] < b[d]){ 
          return -1; 
         } 
         if (a[d] > b[d]){ 
          return 1; 
         } 
         else{ 
          return 0; 
         } 
        }); 
       } 

       else { 
        rows.sort(function(a, b){ 
         return b[d] - a[d]; 
        }) 
       } 
      }); 

    var rows = tbody.selectAll("tr") 
     .data(data2) 
     .enter() 
     .append("tr") 
     .on("mouseover", function(d){ 
      d3.select(this) 
       .style("background-color", "orange"); 
     }) 
     .on("mouseout", function(d){ 
      d3.select(this) 
       .style("background-color","transparent"); 
     }); 


    var cells = rows.selectAll("td") 
     .data(function(row){ 
      return columns.map(function(d){ 
       return {value: row[d]}; 
      }); 
     }) 
     .enter() 
     .append("td") 
     .html(function(d){ return d.value;}); 

    var players = d3.nest() 
     .key(function(d){ return d.Year; }) 
     //.key(function(d){return d.Club;}) 
     //.key(function(d){return d.PointsNTeams;}) 
     //.rollup(function(d){ return d.PointsNTeams; }) 
     .rollup(function(a){ return a.length; }) 
     .entries(data2); 

    var selector = d3.select("#selector"); 

    selector 
     .selectAll("option") 
     .data(players) 
     .enter() 
     .append("option") 
      .text(function(d){ return d.key + ":" + d.value; }) 
      .attr("value", function(d){ return d.key; }) 

    selector 
     .on("change", function(d){ 
     d3.selectAll("th") 
     .style("color", function(d) 
     { 
      if (d == "Year") { 
       return "green"; 
      } 
      else { 
       return "red"; 
      } 
     }); 
     }); 

}); 

</script> 
</body>

出典

2017-01-27 Ibarrameade

あなたはこれを使って、選択した年に対応した行に色ができます：それは動作しません

selector 
    .on("change", function(d){ 
    var v=this.value; 
    rows.style("color", function(d){ 
     if (d.Year == v){ 
      return "green"; 
     } 
     else { return "red";} 
    }); 
    });

出典

2017-01-27 11:35:35 GuitarExtended

。私は以前と同じ結果を得ています。 – Ibarrameade

selector.on（ "change"、）を私のものに置き換えましたか？わたしにはできる。 – GuitarExtended

D3テーブルの作成。 else文は目のために働いているが、TD

答えて

関連する問題