javascript - DC.JS散点图图表选择

Question

您好，我正在使用 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);
      });
    });

Answer 1

我不会尝试使用图表中的点，而是使用交叉过滤器对象来检索数据。 (毕竟我们 MVC 中的模型是交叉过滤器。)

因此您可以使用 self.chart.dimension().top(Infinity) 获取当前过滤的所有原始数据行。注意 dimension.top与 group.all 的工作方式不同因为它确实遵守自己的过滤器。这就是您想要的。

如果您更愿意使用精简(分组)数据，则必须创建一个单独的维度和组来观察所有过滤器。

这里要注意的重要一点是，选择不是特定于画笔或图表。由于散点图已经观察到其他图表上的任何过滤器，并且您对散点图上的画笔感兴趣，因此结果与交叉过滤器实例中完全过滤的行集相同。