Javascript dc.js和带过滤与未过滤的交叉过滤堆栈条形图
我正在使用很棒的dc.js/d3.js/crossfilter组合——主要是为了获得巨大成功。但是,我需要在过滤数据的同时保留未过滤的维度数据。我可能会设置方法,将未过滤的维度数据保存在对象中,然后访问它,但在使用如此强大的组合时,这似乎很弱 具体地说,我试图创建一个堆叠条形图,条形图的底部=未过滤的数字,条形图的顶部=过滤结果。如果我进行筛选,我没有找到检索起始组计数的方法Javascript dc.js和带过滤与未过滤的交叉过滤堆栈条形图,javascript,d3.js,crossfilter,dc.js,Javascript,D3.js,Crossfilter,Dc.js,我正在使用很棒的dc.js/d3.js/crossfilter组合——主要是为了获得巨大成功。但是,我需要在过滤数据的同时保留未过滤的维度数据。我可能会设置方法,将未过滤的维度数据保存在对象中,然后访问它,但在使用如此强大的组合时,这似乎很弱 具体地说,我试图创建一个堆叠条形图,条形图的底部=未过滤的数字,条形图的顶部=过滤结果。如果我进行筛选,我没有找到检索起始组计数的方法 <input type="text" id = "keywordTxt"></input><
<input type="text" id = "keywordTxt"></input><button id = "filterButton">Filter</button>
<div id="i9chart"></div>
var I9Chart = dc.barChart("#i9chart");
d3.csv("I9.csv",function(csv) {
csv.forEach(function(d) {
d.I9_Formatted = numberFormat(d.I9_Code);
d.I9_Whole = Math.floor(d.I9_Code)
})
//set up dimensions
var ndx = crossfilter(csv);
var I9_DescripDim = ndx.dimension(function(d) { return d.I9_Description; });
var I9_WholeDim = ndx.dimension(function(d) { return d.I9_Whole; });
var I9_WholeGroup = I9_WholeDim.group();
var maxI9 = I9_WholeDim.top(1)[0].I9_Whole;
var I10_DescripDim = ndx.dimension(function(d) { return d.I10_Description; });
I9Chart.width(750)
.height(300)
.margins({top: 10, right: 20, bottom: 30, left: 40})
.dimension(I9_WholeDim)
.group(I9_WholeGroup)
// pretty much every approach I've tried results in the stack having the same y value as the filtered.
.valueAccessor(function (d) {return d.value; })
.stack(I9_WholeDim.group(),function(d,i) { return d.???; })
.x(d3.scale.linear().domain([0,maxI9]))
.rangeChart(ICD9ChartBrush)
.brushOn(false)
.title(function (d) { return d.key + ": " + d.value; })
.elasticY(true)
.centerBar(true);
//filter by the I10 description dimension
document.getElementById("filterButton").onclick = function() {
var keyword = document.getElementById("keywordTxt").value;
var matcher = new RegExp(keyword,'i');
var filteredDim = I10_DescripDim.filter(function(val, i){ return matcher.test(val)});
过滤器
var I9Chart=dc.条形图(“I9Chart”);
d3.csv(“I9.csv”,函数(csv){
csv.forEach(函数(d){
d、 I9_格式=数字格式(d.I9_代码);
d、 I9_整体=数学楼层(d.I9_代码)
})
//设置尺寸
var ndx=交叉过滤器(csv);
var I9_descriptim=ndx.dimension(函数(d){返回d.I9_Description;});
var I9_WholeDim=ndx.dimension(函数(d){返回d.I9_整;});
var I9_WholeGroup=I9_WholeDim.group();
var maxI9=I9_WholeDim.top(1)[0]。I9_整体;
var I10_descriptim=ndx.dimension(函数(d){返回d.I10_Description;});
I9图表宽度(750)
.高度(300)
.margins({顶部:10,右侧:20,底部:30,左侧:40})
.尺寸(I9_WholeDim)
.group(I9_WholeGroup)
//几乎我尝试过的每一种方法都会导致堆栈中的y值与过滤后的值相同。
.valueAccessor(函数(d){返回d.value;})
.stack(I9_WholeDim.group(),函数(d,i){返回d.?;})
.x(d3.scale.linear().domain([0,maxI9]))
.范围图(ICD9ChartBrush)
.brushOn(错)
.title(函数(d){返回d.key+:“+d.value;})
.弹性(真实)
.centerBar(正确);
//按I10描述维度过滤
document.getElementById(“filterButton”).onclick=function(){
var关键字=document.getElementById(“keywordTxt”).value;
var matcher=newregexp(关键字'i');
var filteredim=I10_DescripDim.filter(函数(val,i){return matcher.test(val)});
在Ethan Jewett的激励下-解决我自己的问题:
将完整的、未筛选的分组维度存储为静态对象(发现哈希最有效)首先-在过滤之前抓取静态组
I9_WholeObjGroup = I9_WholeGroup.top(Infinity);
然后-为了使访问键和值更容易:
var I9_hash = {};
I9_WholeObjGroup.forEach( function(p,i) {
I9_hash[p.key] = p.value
})
最后,I9_散列用于堆栈函数(或其所需的任何其他位置)
堆栈的美妙之处在于,可以添加任何数字数据—常量、基于现有未过滤数据的变量,甚至是常量过滤数据(例如,对于堆叠百分比图)将未过滤的维度数据保存在静态对象中可能是您的最佳选择,至少在我的经验中是这样。这完美地回答了我的问题。
.stack(I9_WholeGroup, "Total Items",function(d) {
if(d.value > 0 ){ //only add the stacked data to filtered bars that have data.
var id = d.key
return I9_hash[id] - d.value; //only add the difference between the filter and totals
}
})