DC.JS 散点图图表选择
DC.JS scatterplot chart selection
嗨,我正在使用 dc.js。
我不明白如何获取用于构建屏幕截图中显示的工具提示的数据。
如何获取事件处理程序中的选定项 brush.on ( 'brushend.foo', function () {}) ?
这是我绘制工具提示的处理程序:
var brush = this.chart.brush();
brush.on('brushend.foo', function() {
let selection = self.chart.select('.extent');
let tooltipValues = {
maxProbability: '-',
minProbability: '-',
minImpact: '-',
maxImpact: '-',
}
selection.on('mousemove', function(){
selection.on
div.transition()
.duration(200)
.style("opacity", 1);
div.html(
`
<div> Probability (percents) max: ${tooltipValues.maxProbability} <div>
<div> Probability (percents) min: ${tooltipValues.minProbability} <div>
<div> Impact max: ${tooltipValues.maxImpact} <div>
<div> Impact min ${tooltipValues.minImpact} <div>
`
)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px")
.style("class", "content")
})
.on("mouseout", function(d) {
div.transition()
.duration(300)
.style("opacity", 0);
});
});
您使用 d
作为函数的参数。根据您的数据的不同,d
将具有不同的属性。例如 d.x
和 d.y
,或 d.impact
和 d.probability
selection.on('mousemove', function(d){
console.log('Hovering x at ' + d.x + ' and y at' + d.y);
console.log(d);
});
我不会尝试使用图表中的点,而是使用交叉过滤器对象来检索数据。 (毕竟我们 MVC 中的模型是 crossfilter。)
因此您可以使用 self.chart.dimension().top(Infinity)
获取当前过滤的所有原始数据行。请注意 dimension.top works differently from group.all 因为它 确实 观察自己的过滤器。这就是你想要的。
如果您更愿意使用精简(分组)数据,则必须创建一个单独的维度和组来观察所有过滤器。
这里要注意的重要一点是选择不是特定于画笔或图表。由于散点图已经观察到其他图表上的任何过滤器,并且您对散点图上的画笔感兴趣,因此结果与 crossfilter 实例中完全过滤的行集相同。
嗨,我正在使用 dc.js。
我不明白如何获取用于构建屏幕截图中显示的工具提示的数据。
如何获取事件处理程序中的选定项 brush.on ( 'brushend.foo', function () {}) ?
这是我绘制工具提示的处理程序:
var brush = this.chart.brush();
brush.on('brushend.foo', function() {
let selection = self.chart.select('.extent');
let tooltipValues = {
maxProbability: '-',
minProbability: '-',
minImpact: '-',
maxImpact: '-',
}
selection.on('mousemove', function(){
selection.on
div.transition()
.duration(200)
.style("opacity", 1);
div.html(
`
<div> Probability (percents) max: ${tooltipValues.maxProbability} <div>
<div> Probability (percents) min: ${tooltipValues.minProbability} <div>
<div> Impact max: ${tooltipValues.maxImpact} <div>
<div> Impact min ${tooltipValues.minImpact} <div>
`
)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px")
.style("class", "content")
})
.on("mouseout", function(d) {
div.transition()
.duration(300)
.style("opacity", 0);
});
});
您使用 d
作为函数的参数。根据您的数据的不同,d
将具有不同的属性。例如 d.x
和 d.y
,或 d.impact
和 d.probability
selection.on('mousemove', function(d){
console.log('Hovering x at ' + d.x + ' and y at' + d.y);
console.log(d);
});
我不会尝试使用图表中的点,而是使用交叉过滤器对象来检索数据。 (毕竟我们 MVC 中的模型是 crossfilter。)
因此您可以使用 self.chart.dimension().top(Infinity)
获取当前过滤的所有原始数据行。请注意 dimension.top works differently from group.all 因为它 确实 观察自己的过滤器。这就是你想要的。
如果您更愿意使用精简(分组)数据,则必须创建一个单独的维度和组来观察所有过滤器。
这里要注意的重要一点是选择不是特定于画笔或图表。由于散点图已经观察到其他图表上的任何过滤器,并且您对散点图上的画笔感兴趣,因此结果与 crossfilter 实例中完全过滤的行集相同。