dc.js 분산 형 플롯 컨트롤의 선택 범위에서 필터링

Question

분산 상자에서 치수를 필터링하려고 시도하고 컨트롤 (선택 상자)을 통해 렌더링 된 플롯에 문제가 발생했습니다. 아마도 차원이 배열 [키, 값, 값]을 반환하고 컨트롤의 텍스트 값을 사용하여 필터링하려고하기 때문에 나는 생각하고 있습니다. 나는이 여러 곳에서 접근 것 같다 발견 예에서

<div id="chart-scatter"></div> 
<select id="selection"> 
    <option value="BranchA">Branch A</option> 
    <option value="BranchB">Branch B</option> 
    <option value="BranchC">Branch C</option> 
    <option value="BranchD">Branch D</option> 
</select> 

var transactions = [ 
    { 
    accountType: 9, 
    amount: 284, 
    serviceName: "BranchE" 
    }, 
    { 
    accountType: 7, 
    amount: 716, 
    serviceName: "BranchE" 
    }, 
    { 
    accountType: 5, 
    amount: 899, 
    serviceName: "BranchD" 
    }, 
    { 
    accountType: 8, 
    amount: 781, 
    serviceName: "BranchD" 
    }, 
    { 
    accountType: 5, 
    amount: 295, 
    serviceName: "BranchA" 
    }, 
    { 
    accountType: 9, 
    amount: 770, 
    serviceName: "BranchB" 
    }, 
    { 
    accountType: 9, 
    amount: 195, 
    serviceName: "BranchE" 
    }, 
    { 
    accountType: 5, 
    amount: 335, 
    serviceName: "BranchF" 
    }, 
    { 
    accountType: 10, 
    amount: 74, 
    serviceName: "BranchF" 
    }, 
    { 
    accountType: 10, 
    amount: 223, 
    serviceName: "BranchC" 
    }, 
    { 
    accountType: 5, 
    amount: 290, 
    serviceName: "BranchD" 
    }, 
    { 
    accountType: 10, 
    amount: 485, 
    serviceName: "BranchA" 
    }, 
    { 
    accountType: 7, 
    amount: 364, 
    serviceName: "BranchE" 
    }, 
    { 
    accountType: 9, 
    amount: 509, 
    serviceName: "BranchB" 
    }, 
    { 
    accountType: 8, 
    amount: 74, 
    serviceName: "BranchC" 
    }, 
    { 
    accountType: 9, 
    amount: 442, 
    serviceName: "BranchE" 
    } 
]; 

filter = crossfilter(transactions); 
dim = filter.dimension(function(d) { 
    return [d.accountType, d.amount, d.serviceName]; 
}); 
grp = dim.group(); 
scatterChart = dc.scatterPlot("#chart-scatter"); 
scatterChart 
    .width(380) 
    .height(200) 
    .margins({ 
    top: 10, 
    right: 20, 
    bottom: 30, 
    left: 40 
    }) 
    .dimension(dim) 
    .group(grp) 
    .x(d3.scale.linear().domain([4., 11.])) 
    .y(d3.scale.linear().domain([0., 1000.])) 
    .renderHorizontalGridLines(true) 
    .renderVerticalGridLines(true) 
    .symbolSize(30) 
    .highlightedSize(8) 
    .colorAccessor(function(d) { 
    return d.key[2]; 
    }) 
    .colors(d3.scale.ordinal() 
    .domain(['BranchA', 'BranchB', 'BranchC','BranchD','BranchE', 'BranchF']) 
    .range(["#fa3701", "#339933", "#bbbbbb","#aaaaaa","#999999","#888888"]) 
); 

    d3.select("#selection").on('change', function(){ 

     dim.filter($("#selection").val()) 
     scatterChart.redraw(); 
     dc.redrawAll(); 
    }) 

dc.renderAll(); 

그러나 아무도 내가 찾을 수있는 분산 정말없는 나는 차이가 희미한 = 배열 ​​

에게 주어질 것입니다 무슨 궁금 JSFiddle

Answer 1

그룹이 자체 차원 (https://github.com/crossfilter/crossfilter/wiki/Crossfilter-Gotchas#a-group-does-not-observe-its-dimensions-filters)의 필터를 관찰하지 않습니다. 그룹이 정의 된 것과 동일한 차원에서 필터링하므로 필터는 그룹에 영향을 미치지 않습니다. 업데이트 된 JSFiddle을

다음

d3.select("#selection").on('change', function(){ 
    serviceDim.filter($("#selection").val()) 
    //scatterChart.redraw(); 
    dc.redrawAll(); 
}) 

은 다음과 같습니다 :

는 서비스 이름에 대한 2 차원을 정의하고 그 자리에 기본 필터를 넣어 다음과 같이

serviceDim = filter.dimension(function(d) { 
    return "" + d.serviceName; 
}) 
serviceDim.filter('BranchA') 

는 그런 다음 변경 기능을 업데이트 https://jsfiddle.net/esjewett/uhvh23b0/