在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 ）包含要突出顯示的特定位置的數據。