在d3js中如何通过单击堆栈栏来过滤数据

Question

我正在尝试通过单击堆叠条中的某个矩形条来过滤数据。这个堆栈栏是一个二维图，水平指数是年，而垂直指数不同的产品收入，我想在某一年按特定产品过滤。意味着当我点击整个图形的矩形条时，数据应该按特定年份和某个产品进行过滤。

我的代码是：

metrics.on("click", function(d,i,j){
         d3.select(this)
         .style("fill","lightcoral")
         .style("stroke","red");
         fdata =rawdata.filter(function(d){return (d[xvalue]==_seriesA[i])&&(d[yvalue]==_seriesB[j])});
    });

但奇怪的是j的值总是未定义的，尽管如果我附加一个标题：

metrics.append("title").text(
            function(d,i,j) {
                return i + ' - '+j ;
            });

j的值将正确打印，“on”点击功能有什么特别之处吗？为什么我不能得到j的值？任何帮助将不胜感激....这让我整夜疯狂......

Answer 1

根据documentation，.on()的第二个参数是一个带两个参数的函数，而不是三个。同样，它也不适用于你的第二个例子。

我认为你对数据与呈现方式之间的区别感到困惑。 .on()函数将为您提供数据。您在代码中某处创建的比例会获取该数据并将其映射到图表中的x和y坐标（或者直接使用数据而不使用比例）。在.on()函数中，您使用的数据与创建图表时使用的数据完全相同。也就是说，数据项（代码中的d）包含您要突出显示的特定位置的数据。