- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
尝试使用样本数据中3列的最小值,最大值和平均值创建d3/dc/xfilter dataTable。辛苦了几个小时,但无法理解如何将reduceAdd,reduceRemove,reduceInitial函数集成到dataTable中以创建三个必要的行。
所需的输出将如下所示:
------------------------------------------
| Value | Cars | Bikes | Trucks |
------------------------------------------
| Min | 125 | 310 | 189 |
------------------------------------------
| Max | 230 | 445 | 290 |
------------------------------------------
| Avg | 178 | 385 | 245 |
------------------------------------------
['min', 'max', 'avg']
),但是如何从中引用标签呢?
var myCSV = [
{"shift":"1","date":"01/01/2016/08/00/00","car":"178","truck":"255","bike":"317","moto":"237"},
{"shift":"2","date":"01/01/2016/17/00/00","car":"125","truck":"189","bike":"445","moto":"273"},
{"shift":"3","date":"02/01/2016/08/00/00","car":"140","truck":"219","bike":"328","moto":"412"},
{"shift":"4","date":"02/01/2016/17/00/00","car":"222","truck":"290","bike":"432","moto":"378"},
{"shift":"5","date":"03/01/2016/08/00/00","car":"200","truck":"250","bike":"420","moto":"319"},
{"shift":"6","date":"03/01/2016/17/00/00","car":"230","truck":"220","bike":"310","moto":"413"},
{"shift":"7","date":"04/01/2016/08/00/00","car":"155","truck":"177","bike":"377","moto":"180"},
{"shift":"8","date":"04/01/2016/17/00/00","car":"179","truck":"203","bike":"405","moto":"222"},
{"shift":"9","date":"05/01/2016/08/00/00","car":"208","truck":"185","bike":"360","moto":"195"},
{"shift":"10","date":"05/01/2016/17/00/00","car":"150","truck":"290","bike":"315","moto":"280"},
{"shift":"11","date":"06/01/2016/08/00/00","car":"200","truck":"220","bike":"350","moto":"205"},
{"shift":"12","date":"06/01/2016/17/00/00","car":"230","truck":"170","bike":"390","moto":"400"},
];
dataTable = dc.dataTable('#dataTable');
lc1 = dc.lineChart("#line1");
lc2 = dc.lineChart("#line2");
lc3 = dc.lineChart("#line3");
var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S");
myCSV.forEach(function (d) {
d.date = dateFormat.parse(d.date);
});
myCSV.forEach(function (d) {
d['car'] = +d['car'];
d['bike'] = +d['bike'];
d['moto'] = +d['moto'];
});
//console.log(myCSV);
var facts = crossfilter(myCSV);
var dateDim = facts.dimension(function (d) {return d.date});
var carDim = facts.dimension(function (d) {return d['car']});
var dgCar = dateDim.group().reduceSum(function (d) {return d['car']});
var bikeDim = facts.dimension(function (d) {return d['bike']});
var dgBike = dateDim.group().reduceSum(function (d) {return d['bike']});
var motoDim = facts.dimension(function (d) {return d['moto']});
var dgMoto = dateDim.group().reduceSum(function (d) {return d['moto']});
var minDate = new Date ("2016-01-01T08:00:00.000Z");
var maxDate = new Date ("2016-01-03T17:00:00.000Z");
var maxY = d3.max(myCSV, function(d) {return d['car']});
function reduceAdd(i,d){ return i+1; }
function reduceRemove(i,d){return i-1; }
function reduceInitial(){ return ['min','max','avg'];}
dataTable
.width(jsTablWidth)
.height(400)
.dimension(dateDim)
.group( function(d){return '';} )
.columns([
{
label: 'Value',
format: function(d) { return dateGroup1.reduce(reduceAdd,reduceRemove,reduceInital); }
},
{
label: tSel1.replace(/_/g, " "),
format: function(d) { return //avg cars ; }
},
{
label: tSel2.replace(/_/g, " "),
format: function(d) { return //avg bikes ; }
},
{
label: tSel3.replace(/_/g, " "),
format: function(d) { return //avg moto; }
}
]);
dc.renderAll();
dc.redrawAll();
svg{height:280px;}
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link href="http://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>
<svg id="dataTable"></svg>
<svg id="line1"></svg>
<svg id="line2"></svg>
<svg id="line3"></svg>
最佳答案
好的,希望您可以将 table 对角线交叉放置,将运输方式设置为行而不是列。如果不弄清楚那部分,这个解决方案已经很古怪了。
除了跟踪所有值之外,实际上没有其他方法可以计算出最小值和最大值。因此,我们将使用complex reductions example中的减少量。这些实际上根本不会减少,但会维护已过滤行的排序数组。
我们需要一个唯一的键来保留排序后的数组(以便我们删除正确的行。幸运的是,您在shift
字段中输入了该键。
因此,这里是那些功能,或者更确切地说,是在给定唯一键访问器的情况下生成还原器的功能。
function groupArrayAdd(keyfn) {
var bisect = d3.bisector(keyfn);
return function(elements, item) {
var pos = bisect.right(elements, keyfn(item));
elements.splice(pos, 0, item);
return elements;
};
}
function groupArrayRemove(keyfn) {
var bisect = d3.bisector(keyfn);
return function(elements, item) {
var pos = bisect.left(elements, keyfn(item));
if(keyfn(elements[pos])===keyfn(item))
elements.splice(pos, 1);
return elements;
};
}
function groupArrayInit() {
return [];
}
var filteredRows = facts.groupAll().reduce(
groupArrayAdd(dc.pluck('shift')),
groupArrayRemove(dc.pluck('shift')),
groupArrayInit
);
.bottom()
方法的对象,该方法可以动态计算每一行:
var fakeDim = {
bottom: function() {
return [
{key: 'Car', value: filteredRows.value(), acc: dc.pluck('car')},
{key: 'Truck', value: filteredRows.value(), acc: dc.pluck('car')},
{key: 'Bike', value: filteredRows.value(), acc: dc.pluck('bike')},
{key: 'Moto', value: filteredRows.value(), acc: dc.pluck('moto')}
];
}
};
acc
是什么?
format
访问器实际计算所有内容。我们将
key
用作“标签列”,将原始行保留在
value
成员中;并且我们将提供访问器
acc
来计算指标。
dataTable
.width(400)
.height(400)
.dimension(fakeDim)
.group( function(d){return '';} )
.columns([
{
label: 'Value',
format: function(d) {
return d.key;
}
},
{
label: 'Min',
format: function(d) {
return d3.min(d.value, d.acc);
}
},
{
label: 'Max',
format: function(d) {
return d3.max(d.value, d.acc);
}
},
{
label: 'Avg',
format: function(d) {
return d3.mean(d.value, d.acc);
}
}
]);
var categories = {
Car: 'car',
Truck: 'truck',
Bike: 'bike',
Moto: 'moto'
};
function fake_dimension(cats) {
return {
bottom: function() {
return Object.keys(cats).map(function(k) {
return {
key: k,
value: filteredRows.value(),
acc: dc.pluck(cats[k])
};
});
}
};
}
var fakeDim = fake_dimension(categories);
var columns = [
{
label: 'Value',
format: function(d) {
return d.key;
}
},
{
label: 'Min',
format: function(d) {
return d3.min(d.value, d.acc);
}
},
{
label: 'Max',
format: function(d) {
return d3.max(d.value, d.acc);
}
},
{
label: 'Avg',
format: function(d) {
return d3.mean(d.value, d.acc);
}
}
];
function transpose_datatable(cats, dim, cols) {
var cols2 = d3.map(cols, function(col) { // 1
return col.label;
});
return {
dim: { // 2
bottom: function() {
var dall = d3.map(dim.bottom(Infinity), function(row) { // 3
return row.key;
});
return cols.slice(1).map(function(col) { // 4
var row = {
label: col.label
};
Object.keys(cats).forEach(function(k) {
row[k] = dall.get(k);
});
return row;
});
}
},
cols: [ // 5
{
label: cols[0].label,
format: function(d) {
return d.label;
}
}
].concat(Object.keys(cats).map(function(k) { // 6
return {
label: k,
format: function(d) {
return cols2.get(d.label).format(d[k]);
}
}
}))
};
}
var transposed = transpose_datatable(categories, fakeDim, columns)
d3.map
,它的行为就像一个行为良好的JavaScript对象。 .bottom()
方法,就像上面的方法一样。 .bottom()
的定义将需要通过键(类别名称)索引的所有原始数据。因此,我们也将其放入d3.map
对象中。 .format()
调用原始列的format
,使用类别名称获取数据。 关于dc.js使用三列的最小值,最大值,平均值创建dataTable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42475836/
我有一个像 [3,10,4,3,9,15,6,13] 这样的列表,我想找到两个不重叠的系列/序列给出通过取最大-最小值可获得的最大值.它们必须是连续的,因此您不能从 1 中减去项目 3。但是您可以从
我正在尝试创建顶部列,这是几个列行的最大值。 Pandas 有一个方法 nlargest但我无法让它成行工作。 Pandas 也有 max和 idxmax这正是我想做的,但仅限于绝对最大值。 df =
我在使用 Android 时遇到了一点问题。 我有我的 GPS 位置,明确的经纬度,以及以米为单位的搜索射线(例如 100 米),可以吗? 想象一下我在射线形成的圆心的位置,我会知道如何在 Andro
假设我有一组最小值和最大值。我想要一个数据结构,在给定外部值的情况下,它会最有效地为我提供值 >= 最小值、值 = 最小值和值 <= 最大值?,我们在Stack Overflow上找到一个类似的问题:
我有以下 Maxima 代码: m:sum(x[i],i,1,N)/N; 然后我想计算 $m^2$。 m2:m^2, sumexpand; 然后我得到双重求和: sum(sum(x[i1]*x[i2]
如何从嵌套字典中获取一个值的最小值/最大值,该字典的缺失值也包含“Nan”? *这是供引用,我找到了一个解决方案,我想我应该在这里分享它,因为我在 stackoverflow 上的任何地方都找不到答案
在千里马 12.04.0 我有一个总和 mysum : sum(u[i]^2, i, 1, N); 现在我区分它 diff(mysum, u[i]); 现在我指定一个定义的索引 i=A 来区分它 at
是否可以根据时间轴获取最小和最大时间戳?我将在 parking 场示例中进行解释。 +---------------------+------+--------+-------+-----------
基本上在几个领域有几个日期 SELECT MAX(MAX(DATE_A),MAX(DATE_B)) from table DATE_A 和 DATE_B 是日期,我基本上想要日期 A 或日期 B 的最
我创建了一个小测试,其中一个 div 根据滚动深度滑动。 我只是想知道怎么设置 A) 起点 (scrolltop = x something) B) 如何设置最大值? var pxlCount = 0
由于达到最大值,clock_gettime() 何时会使用 CLOCK_MONOTONIC 返回一个较小的值?我不是指被描述为错误的小扭曲,而是类似于计数器重置的东西。 它是时间测量的,还是与滴答的绝
我正在使用 angularjs,尤其是 $timeout 服务(setTimeout 的包装器)。它的工作原理如下: angular.module('MyApp').controller('MyCo
是否有可能获得 MinValue - 或 MaxValue未知的 T 型?如 Int其中有 Int.MinValue和 Int.MaxValue ?? 谢谢 最佳答案 正如@mpilquist 在上面
我的数据为 员工: id Name -------- 1 xyz 2 abc 3 qaz Employee_A:(Eid - 员工表,title - 职称表) eid active
我有一个日期和时间行列表,每天有多行。 对于每个唯一日期,我想获取最小和最大时间值。 如何在 Excel v10(又名 2002)中执行此操作? 最佳答案 首先,您可以使用 Excel 函数 MIN(
我有以下 SQL 表 - Date StoreNo Sales 23/4 34 4323.00 23/4 23 5
我可能错过了一些微不足道的东西。我想我还没有完全理解一些基本的交叉过滤器概念 无论如何,我创建了一个带有几个维度的交叉过滤器,并在维度上使用过滤器。我现在想知道过滤值(不是键)的最小值/最大值。 我将
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 9 年前。 Improve t
我在这里错过了什么吗?我希望以下代码段中的 np.max 会返回 [0, 4] ... >>> a array([[1, 2], [0, 4]]) >>> np.max(a,
给定大小为 2 的列表列表,我试图找到通过索引确定最小/最大值的最快方法。目标是确定一系列 XY 点的边界/范围。 子列表未排序(按一个索引排序并不能保证另一个索引已排序)。 目前我正在做以下事情:
我是一名优秀的程序员,十分优秀!