두 개의 범위 슬라이더를 동시에 사용하려면 어떻게해야합니까?

Question

2 개의 범위 슬라이더를 사용하여 나이와 높이를 기준으로 테이블의 데이터를 동시에 필터링하려고합니다.

d3.slider.js 및 dc.dataTable을 사용하여 2 개의 범위 슬라이더 (나이 및 높이)를 구현했습니다. 나는이 두 범위 슬라이더를 동시에 사용하고 싶지만 제대로 작동하지 않는 것 같습니다.

또한이 테이블 아래에는 "49 개의 레코드 중에서 49 개가 선택되었습니다."라는 텍스트가 있습니다. 슬라이더를 사용하는 동안 숫자는 바뀌지 않습니다.

코드 :

var dataTable = dc.dataTable("table#list"); 
    var dispatch = d3.dispatch('load','filter'); 

    d3.json('data.json',function(json){ 
     dispatch.load(json) 
    }); 

    dispatch.on('load',function(json) { 
     var formatNumber = d3.format(",d"); 
     var facts = crossfilter(json); 
     var dimensionAge = facts.dimension(function(d) { 
      return +d.age; 
     }); 
     var accessorAge = function(d) { 
      return d.age; 
     }; 
     var dimensionHeight = facts.dimension(function(d) { 
      return +d.height; 
     }); 
     var accessorHeight = function(d) { 
      return d.height; 
     }; 
     var range = d3.extent(json, accessorAge); 
     var range2 = d3.extent(json, accessorHeight); 
     var all = facts.groupAll(); 

     d3.select("div#slider3") 
      .call(d3.slider().axis(true).min(range[0]).max(range[1]).value(range) 
      .on("slide", function(evt,value) { 
       dispatch.filter(value); 
       d3.select("#slider3textmin").text(Math.floor(value[0])); 
       d3.select("#slider3textmax").text(Math.floor(value[1])) 
      })) 

     d3.select("div#slider4") 
      .call(d3.slider().axis(true).min(range2[0]).max(range2[1]).value(range2) 
      .on("slide", function(evt,value) { 
       dispatch.filter(value); 
       d3.select("#slider4textmin").text(Math.floor(value[0])); 
       d3.select("#slider4textmax").text(Math.floor(value[1])) 
      })) 


     FieldNames = [ 
      "", 
      "Age", 
      "Weight", 
      "Height", 
      "Eye Color", 
      "Hair Color", 
      "Race", 
      "Sex", 
      "Annual Income" 
     ]; 

     d3.select("tr#FieldNames").selectAll("th") 
      .data(FieldNames) 
      .enter() 
      .append("th") 
      .append("text") 
      .text(function(d){ 
       return d; 
      }); 

     dataTable 
      .dimension(dimensionAge) 
      .group(function(d) { 
       return d.sex; 
      }) 
      .columns([ 
       function(d) {return "";}, 
       function(d) {return d.age;}, 
       function(d) {return d.weight;}, 
       function(d) {return d.height;}, 
       function(d) {return d.eyeColor;}, 
       function(d) {return d.hairColor;}, 
       function(d) {return d.race;}, 
       function(d) {return d.sex;}, 
       function(d) {return formatNumber(d.annualIncome);} 
      ]); 

     dispatch.on('filter',function(value){ 
      dataTable.replaceFilter(dc.filters.RangedFilter(value[0], value[1])); 
      dataTable.redraw(); 
     }) 

     dc.dataCount(".dc-data-count") 
      .dimension(facts) 
      .group(all); 

     dc.renderAll(); 

    }); 

Link to the website

Plunker

Answer 1

원래 응답 on the dc.js users group.

d3.slider.js의 사용법 - 이전에는 dc.js와 함께 사용 된 것을 보지 못했습니다.

빠른보기에서 두 가지 문제점이 있습니다. 먼저 양쪽 슬라이더에 하나의 디스패치를 ​​사용하고 있으므로 두 슬라이더 모두 테이블의 크기이므로 두 슬라이더가 나이를 필터링합니다 ( ). 높이에 따라 필터링하기 위해 다른 크기를 만들고 싶지만 실제로는 을 첨부하지 않아도됩니다.

둘째

, 대신 자사의 차트 그룹의 모든 차트 가 dataCount을 포함하여 다시 그려을 얻을 수 있도록 단지 dataTable.redraw(), 당신은 아마() dataTable.redrawGroup를 호출 할로 차트를 다시 그립니다. 특히

:

1. 두 세 슬라이더

     dispatch.filterAge(value); 
   

   filterAge

   호출

   var dispatch = d3.dispatch('load','filterAge','filterHeight'); 
   

2. 당신의 파견에 필터 이벤트와 높이 슬라이더를해야합니다 filterHeight를 호출합니다

     dispatch.filterHeight(value); 
   

3. 현재 filter 이벤트 핸들러는 이제 filterAge을 처리하며 redrawGroup

   dispatch.on('filterAge',function(value){ 
        dataTable.replaceFilter(dc.filters.RangedFilter(value[0], value[1])); 
        dataTable.redrawGroup(); 
       }) 
   

4. 우리가 직접 또한 dimensionHeight을 필터링하고 다른 filterHeight 처리기를 추가 차트 그룹을 다시 그립니다 호출

   dispatch.on('filterHeight',function(value){ 
        dimensionHeight.filter([value[0], value[1]]); 
        dataTable.redrawGroup(); 
       }) 
   

5. 모두 재설정도 dimensionHeight을 삭제해야합니다. 이 측정 기준은 어떤 차트에서도 사용되지 않으므로 dc.filterAll()에서 찾을 수 없습니다.)

Fork of your plunker

 <a href="javascript: dimensionHeight.filter(null); dc.filterAll(); dc.renderAll();">Reset All</a> 

.

리셋 모든

Answer 2

이, 49은 이미이

<a href="#" onclick="sololo()">Reset All</a> 

이

<a href="javascript: dimensionHeight.filter(null); dc.filterAll(); dc.renderAll();">Reset All</a> 

을 대체 correcly

변경로드

을에 파견 한 후이 추가 49 개 기록에서 선택

dispatch.on('load',function(json) { 
//your code 
})  

function sololo(){ 
        //table 
       dispatch.filterAge([0,100]); 
       dispatch.filterHeight([0,100]); 
       //text slider 
       d3.select("#slider4textmin").text(0) 
        d3.select("#slider4textmax").text(0) 
        d3.select("#slider3textmin").text(0); 
        d3.select("#slider3textmax").text(0) 
        //slider 
        d3.select('#slider3').select('#handle-one').style('left','0%') 
       d3.select('#slider3').select('#handle-two') .style('right','0%') 
       d3.select('#slider3').select('div').style('left','0%').style('right','0%') 
        d3.select('#slider4').select('#handle-one').style('left','0%') 
       d3.select('#slider4').select('#handle-two') .style('right','0%') 
       d3.select('#slider4').select('div').style('left','0%').style('right','0%') 
    }