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/