使用下拉菜单进行交叉过滤 [英] Cross-filter using drop downs
问题描述
我有两个下拉菜单. 我希望无论何时在任何一个下拉列表中进行选择,都将调用一个名为intersect的函数,该函数依次调用loadData和loadData1函数.我的代码附在这里.
I have two drop-downs. I want that whenever a selection is made in either of the drop-downs, a function called intersect be called which in turn calls the functions loadData and loadData1.My code is attached here.
<select onchange="intersect()" id="metric" class="wrapper-dropdown">
<option value ="190">190</option>
<option value ="90">90</option>
<option value ="100">100</option>
<option value ="300">300</option>
</select>
<select onchange="intersect()" id="metric1" class="wrapper-dropdown">
<option value ="100">100</option>
<option value ="200">200</option>
<option value ="0">0</option>
</select>
<script>
var intersect= function() {
var total_90 = function() {
var data = [
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];
var ndx = crossfilter(data);
var totalDim = ndx.dimension(function(d) { return d.total; });
var total_90 = totalDim.filter(document.getElementById('metric').selectedOptions[0].value);
return total_90;
};
var tip_90 = function() {
var data = [
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];
var ndx = crossfilter(data);
var tipDim = ndx.dimension(function(d) { return d.tip; });
var tip_90 = tipDim.filter(document.getElementById('metric1').selectedOptions[0].value);
return tip_90;
}
var result = [];
for (var i = 0; i < total_90.length; i++){
if (total_90[i].total == 90 && total_90[i].tip == 0)
{
result.push(total_90[i]);
}
}
for (var i = 0; i < tip_90.length; i++){
if (tip_90[i].total == 90 && tip_90[i].tip == 0)
{
result.push(tip_90[i]);
}
}
function print_filter(filter){
var f=eval(filter);
if (typeof(f.length) != "undefined") {}else{}
if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("["," [\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
}
print_filter("result");
}
</script>
</body>
因此,在任何给定的实例中,如果我在第一个下拉列表中选择了"90",而在第二个下拉列表中已经选择了"0",那么我希望两个JSON数组中的所有行都具有total = 90和tip = 0,将其打印在控制台上.
So, at any given instance if I select '90' in the first drop down and '0' is already selected in the second drop down,then I want all the rows from both the JSON arrays which have total=90 and tip=0 to be printed on the console.
推荐答案
我不确定您为什么要使用d3.js
和crossfilter.js
,但我认为您的问题没有必要.
I not sure why you want to use d3.js
and crossfilter.js
I do not see a need in your question.
由于您只在问题中标记了javascript
.我在此为您提供一个纯JS解决方案,而不是jquery
Since you only tag javascript
in your question. I am hereby provide you a pure JS solution instead of jquery
var m1 = document.getElementById('metric');
var m2 = document.getElementById('metric1');
m1.onchange = function(){
//alert(m1.value);
//alert(m2.value);
var result = intersection(data, data1, m1.value, m2.value);
if (result != ""){
for (var i = 0; i < result.length; i++){
console.log(result[i]);
}
}
}
m2.onchange = function(){
var result = intersection(data, data1, m1.value, m2.value);
if (result != ""){
for (var i = 0; i < result.length; i++){
console.log(result[i]);
}
}
}
//a is the data
//b is the data1
//v1 is the metric value
//v2 is the matric1 value
function intersection(a, b, v1, v2)
{
var result = [];
var c = a.concat(b);
for (var i = 0; i < c.length; i++){
if (c[i].total == v1 && c[i].tip == v2)
{
result.push(c[i]);
}
}
return result;
}
JSFiddle 尝试用total = 90和tip = 0进行选择.所以称您想要的交集"结果.
JSFiddle try your selection with total = 90 and tip = 0. You will get the so call "intersection" result you want.
这篇关于使用下拉菜单进行交叉过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!