D3中的參考JS陣列堆疊條形圖

我正在使用this version of a D3 stacked bar chart。D3中的參考JS陣列堆疊條形圖

當前，當用戶將鼠標懸停在條的一段上時，工具提示將顯示活動段的值。

但是，我想添加html，顯示單個欄中所有段的值的列表（也許突出顯示活動的段）。如何從數組中引用這些數據？代碼當前使用d.y來獲取當前段的值，但其他值呢？

我想使用.html，但我不知道如何訪問/引用/調用其他段的數據。

這裏是想我做的一個想法：

.on("mousemove", function(d) { 
     var xPosition = d3.mouse(this)[0] - 15; 
     var yPosition = d3.mouse(this)[1] - 25; 
     tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); 
     tooltip.select("text").text("$"+(d.y).toLocaleString()) 
     .html("FIRST LINE <br> SECOND LINE HERE IS WHERE I WANT TO PUT OTHER DATA FROM ARRAY"); 
     });

這裏是陣列的樣子

var data = [ 
    { year: "2006", redDelicious: "10", mcintosh: "15", oranges: "9", pears: "6" }, 
    { year: "2007", redDelicious: "12", mcintosh: "18", oranges: "9", pears: "4" }, 
    { year: "2008", redDelicious: "05", mcintosh: "20", oranges: "8", pears: "2" }, 
    { year: "2009", redDelicious: "01", mcintosh: "15", oranges: "5", pears: "4" }, 
    { year: "2010", redDelicious: "02", mcintosh: "10", oranges: "4", pears: "2" }, 
    { year: "2011", redDelicious: "03", mcintosh: "12", oranges: "6", pears: "3" }, 
    { year: "2012", redDelicious: "04", mcintosh: "15", oranges: "8", pears: "1" }, 
    { year: "2013", redDelicious: "06", mcintosh: "11", oranges: "9", pears: "4" }, 
    { year: "2014", redDelicious: "10", mcintosh: "13", oranges: "9", pears: "5" }, 
    { year: "2015", redDelicious: "16", mcintosh: "19", oranges: "6", pears: "9" }, 
    { year: "2016", redDelicious: "19", mcintosh: "17", oranges: "5", pears: "7" }, 
];

編輯：或者，有沒有辦法只是獲得活動部分的ID /鍵而不是所有的分段？

來源

2015-07-21 auto

基於你的小提琴，它看起來像你根據類型分組的蘋果，這看起來是造成你的問題。

如果您按年份（2011年蘋果，2012年蘋果等）分組（<g>）列，而不是按蘋果類型（紅色美味的蘋果，麥金託什蘋果等）分組，則您可以訪問每列的數據，然後可以顯示相關信息。通過這種方式，分組與您的數據結構非常相似，您可以訪問所需的信息以顯示當年的所有信息，或只顯示與特定分段相關的信息。

根據d3js網站，這稱爲「嵌套」。 Mike Bostock（d3的創建者）在理解嵌套以及如何使用它來滿足您的需求方面擁有excellent article。

Mike Bostock有一個很好的使用這種技術的例子here

來源

2015-07-21 16:50:18 DFenstermacher

D3中的參考JS陣列堆疊條形圖

回答

相關問題