javascript - Reference JS array in D3 Stacked Bar Chart -

i using this version of d3 stacked bar chart.

currently, when user hovers on segment of bar, tooltip shows value of active segment.

however, add html shows list of values of segments in single bar (and maybe highlight active one).

how reference data array? code uses d.y grab current segment's value, others?

i'd use .html, have no idea how access/reference/call data other segments.

here jsfiddle

here's idea of i'd do:

.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 want put other data array");       }); 

here array looks like

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" }, ];  

edit: or, there way active segment's id/key instead of segments?

based on fiddle, looks grouping apples according type, looks causing issue.

if group (<g>) columns year (group of 2011 apples, 2012 apples, etc) rather having them grouped type of apple (red delicious apples, mcintosh apples, etc) have access data each column , show relevant information. in way, grouping closely resemble how data structured, , have access information need present either of information year, or display information relevant particular segment.

this called "nesting" according d3js website. mike bostock (the creator of d3) has excellent article on understanding nesting , how use meet needs.

mike bostock has excellent example of using technique here