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）のフィルタを観察しません。グループが定義されているのと同じ次元でフィルタリングしているため、フィルタはグループに影響を与えません。

サービス名の第二の寸法を定義して、所定の位置にデフォルトのフィルタを置く：

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

次のように次に、あなたの変更機能を更新します。ここでは

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

が更新JSFiddleです：https://jsfiddle.net/esjewett/uhvh23b0/