簡體   English   中英

D3js 過濾表

[英]D3js filter table

我正在使用 D3js 進行表格過濾器,並且我已經接近正確了。 過濾器部分工作,它有時會返回正確的數據,有時它不會

在這里我得到所有數據:

在此處輸入圖像描述

這里過濾器正在工作:

在此處輸入圖像描述

但在這里它不起作用:

在此處輸入圖像描述

如果我刪除所有過濾器,它會給我帶來所有數據,這沒關系。

這就是我現在做過濾器的方式。 這里有一個例子

function updates(selectedGroup){

    if (selectedGroup.length>0){

      dataFilter = data.filter(function(d,i){if (selectedGroup.includes(d.Departamento? d.Departamento : 0)){return d};});

    }else {
      dataFilter=data

    }

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

    rows.exit().remove();

    var rowsEnter = rows.enter().append('tr')
     .selectAll("td")
     .data(function(row) {
            return columns.map(function(column) {console.log('entro');
                return {column: column, value: row[column]?row[column]:0};
            });
        })
        .enter()
        .append("td")
        .attr("style", "font-family: Courier") // sets the font style
            .html(function(d) {return d.value? d.value : 0; });

} 

現在你只有一個“輸入”選擇,但沒有改變你的“更新”選擇,就像這樣:

rows.selectAll("td")
  .data(function(row) {
    return columns.map(function(column) {
      return {
        column: column,
        value: row[column] ? row[column] : 0
      };
    });
  })
  .html(function(d) {
    return d.value ? d.value : 0;
  });

這是您的分叉代碼: https://plnkr.co/edit/OJvAOwiP18VXKZkT?open=lib%2Fscript.js&preview

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM