D3.js 필터 기존 html 테이블

그래서 d3으로 만든 html 테이블이 있는데 입력 상자의 텍스트를 기반으로 결과를 필터링하려고합니다.D3.js 필터 기존 html 테이블

는 지금은이 :

filterFunc:(toFilter,model)-> 
    for column in @columns 
     if model.get(column) 
      if model.get(column).indexOf(toFilter) != -1 
       return true 
    return false 

renderTable:()=> 
    @table = d3.select("#search-results-area").append("table").attr("id",@tableId).attr("class","visualization-panel") 
    @thead = @table.append("thead") 
    @tbody = @table.append("tbody") 
    @input = @table.append("input").attr("id",@inputId).on("keydown",(d)=> 
     toFilter = $(@input[0][0]).val() 
     window.setTimeout((()=> 
      toFilter = $(@input[0][0]).val() 
      @rows.filter((d)=> 
        console.log "toFilter" 
        console.log toFilter 
        if @filterFunc(toFilter,d) 
         console.log d 
         return d 
       ) 

      console.log toFilter 
      ),1000) 

     ) 

    @columns = @json["Columns"] 
    @initializeSortingFunctionManager(@columns) 
    @thead.append("tr").selectAll("th").data(@columns).enter().append("th").text((col)-> return col).on("click",(d)=>@tbody.selectAll("tr").sort(@sortingFunctionManager[d])) 
    @tbody.selectAll("tr").attr("class","spacing center-text") 
    @renderTableBody() 

renderTableBody:()=> 
    @rows = @tbody.selectAll("tr").data(@collection.models).enter().append("tr") 
    cells = @rows.selectAll("td").data((model)=> 
     return @columns.map((column)=> 
      return { column : column, val : model.get(column)} 
      ) 
     ).enter().append("td").text((d)=> 
      for column in @columns 
       if d.column == column 
        return d.val 
     ) 
    $("#" + @tableId).dataTable({ 
     "bScrollInfinite" : true, 
     "bScrollCollapse" : true, 
     "sScrollY" : "80%", 
     "sScrollX" : "80%", 
     "bFilter" : false, 
     "bInfo" : false 

    })

어떻게 그것을 있도록해야합니까 테이블을 다시 렌더링 및 필터 FUNC의 조건을 만족하는 행만 표시?

출처

2013-07-02 praks5432

D3의 filter function을 사용하여 선택 항목을 필터링 할 수 있습니다. 그런 다음 필터링 된 선택 항목 (예 : 그것을 제거하십시오. 따라서 코드는 이와 같이 보일 것입니다 (필터 함수가 유지하려는 요소에 대해 true를 반환한다고 가정).

@rows.filter((d) -> [email protected](toFilter, d)) 
    .remove()

또는, .data()에 전달하기 전에 데이터를 필터링 할 수 있습니다 다음 선택에서 작동합니다.

@rows = @tbody.selectAll("tr") 
      .data(@collection.models.filter((d) -> [email protected](toFilter, d)), (d) -> d) 
@rows.exit().remove() 
@rows.enter().append("tr")...

나는 자신의 가치보다는 자신의 인덱스 데이터 항목에 맞게 D3에게 여기 .data() 함수에 두 번째 인수를 추가했습니다.

출처

2013-07-02 18:34:21

그래서 알아 냈습니다. 문제는 지금 exit()를 호출 할 때 이상한 방법이없는 오류가 발생하는 것입니다. – praks5432

nvm, 나는 그걸 알아 냈습니다. 원래 행? 백 스페이스를 누를 때처럼 위의 코드를 다시 검색해야합니다. @rows가 필터링 된 데이터가 된 것 같습니다 – praks5432

그럴 경우 데이터를 필터링 한 다음'.data()'에 전달하는 것이 더 쉽습니다. 적절한 선택에 따라 작동합니다. 내가 게시 한 것은 새 데이터를 행에 바인딩하지 않으므로'.exit() '선택 항목이 없습니다. –

D3.js 필터 기존 html 테이블

답변

관련 문제