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

您使用 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);
});

Answer 2

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

因此您可以使用 self.chart.dimension().top(Infinity) 获取当前过滤的所有原始数据行。请注意 dimension.top works differently from group.all 因为它确实观察自己的过滤器。这就是你想要的。

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

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

DC.JS 散点图图表选择

DC.JS scatterplot chart selection

javascript

d3.js

charts

scatter-plot

dc.js