我想根据从yearSlicer(rowChart)中选择的年份隐藏热图中的列,而不是任何其他交叉过滤器。
热图:
heatMap
.width(1500)
.height(800)
.dimension(dimension)
.group(FTEMonthGroup)
.margins({ left: 200, top: 30, right: 10, bottom: 35 })
.keyAccessor(function (d) { return d.key[0]; })
.valueAccessor(function (d) { return d.key[1]; })
.colorAccessor(function (d) { return +d.value.color; })
.title(function (d) {
return "Manager: " + d.key[1] + "\n" +
"FTE: " + d.value.toolTip + "\n" +
"Date: " + d.key[0] + "";
})
.on('renderlet', function (chart) {
chart.selectAll("g.cols.axis text")
.attr("transform", function () {
var coord = this.getBBox();
var x = coord.x + (coord.width / 2),
y = coord.y + (coord.height / 2);
return "rotate(-45 " + x + " " + y + ")"
})
.style("text-anchor", "right");
});
heatMap.colorCalculator(function (d, i) {
return d.value.color === null ?
'#ccc' : heatMap.colors()(d.value.color);
});
编辑:
隐藏列“隐藏”在最左列下方,导致单元格重叠:
当前“工作”代码(重叠单元格):
格式化日期并将其添加到二维数组:
var parseTime = d3.timeParse("%m/%d/%Y");
var formatTimeYear = d3.timeFormat("%Y");
var formatTimeMonth = d3.timeFormat("%Y - %m");
data.forEach(function (d) {
d.Year = formatTimeYear(parseTime(d.Month));
d.Month = formatTimeMonth(parseTime(d.Month));
});
var arrayMonths = {};
ndx.dimension(function (d) { return d }).top(Infinity).forEach(function (d) {
if (arrayMonths[d.Year]) {
arrayMonths[d.Year].add(d.Month);
} else {
arrayMonths[d.Year] = new Set();
}
});
onClick 调用函数来“隐藏”未选定的年份:
var yearsHidden = [];
var hideYear = function (year) {
var index = yearsHidden.indexOf(year);
if (index === -1) {
yearsHidden.push(year);
} else {
yearsHidden.splice(index, 1);
}
var yearsHiddenArray = null;
yearsHidden.forEach(function (yearAdd) {
if (yearsHiddenArray === null) {
yearsHiddenArray = Array.from(arrayMonths[yearAdd]);
} else {
yearsHiddenArray = yearsHiddenArray.concat(Array.from(arrayMonths[yearAdd]));
}
})
heatMap.cols(yearsHiddenArray);
heatMap.redraw();
// console.log(yearsHiddenArray);
}
yearSlicer(rowChart) onClick:
yearSlicer.on("renderlet.somename", function (chart) {
chart.selectAll('rect').on("click", function (d) {
// console.log("Key: " + d.key);
hideYear(d.key);
});
});
编辑2:
在实现建议的解决方案时遇到一些问题,这是我的分组:
var dimension = ndx.dimension(function (d) { return [d.Month, d["Manager"]]; }),
FTEMonthGroup = dimension.group().reduce(
function reduceAdd(p, v) {
++p.n;
p.color += v.FTE;
p.toolTip += v.FTE;
return p;
},
function reduceRemove(p, v) {
--p.n;
if (p.n === 0) {
p.color = null;
p.toolTip = null;
}
return p;
},
function reduceInitial() {
return { n: 0, color: 0, toolTip: 0 };
});
最佳答案
不幸的是,虽然 .cols()
和 .rows()
似乎很明显应该作为过滤器,但看起来图表仍然显示组,无论它是否列在行和列中。由于默认是从数据中提取行和列的列表,因此我不确定行和列有多大作用,除非在您不这样做的情况下提供不同的排序不指定 rowOrdering
和 colOrdering
。
我认为您需要在这里接受一个假群组,例如 filter_bins :
function filter_bins(source_group, f) {
return {
all:function () {
return source_group.all().filter(function(d) {
return f(d.value);
});
}
};
}
var filtered_years_group = filter_bins(FTEMonthGroup, function(d) {
return !yearsHiddenArray.includes(d.Year);
}
heatMap.group(filtered_years_group);
...或者类似的东西。你知道该怎么做!
关于javascript - 从热图中隐藏列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54636815/