在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的值将正确打印，单击功能是否有特殊之处？ 为什么我无法获得j的值？ 任何帮助将不胜感激....这使我整夜疯狂...

Answer 1

根据文档 ， .on()的第二个参数是一个接受两个参数而不是三个参数的函数。 同样，它在您的第二个示例中也不起作用。

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