Ссылка JS массив в D3 Stacked Bar Chart

Question

Я использую this version of a D3 stacked bar chart.

В настоящее время, когда пользователь нависает над сегментом бара, всплывающая подсказка показывает значение активного сегмента.

Однако, я хотел бы добавить html, который показывает список значений всех сегментов в отдельной строке (и, возможно, выделить активный).

Как я могу ссылаться на эти данные из массива? Код в настоящее время использует d.y для захвата значения текущего сегмента, но как насчет других?

Я хотел бы использовать .html, но я понятия не имею, как получить доступ/ссылку/вызвать данные для других сегментов.

Вот JSFiddle

Вот идея о том, что я хотел бы сделать:

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

EDIT: Или , есть ли способ получить только идентификатор/ключ активного сегмента, а не все сегменты?

Answer 1

Основываясь на вашей скрипке, похоже, что вы группируете яблоки в соответствии с типом, который, похоже, вызывает вашу проблему.

Если вы хотите группировать (<g>) столбцы по годам (группа яблок 2011 года, яблоки 2012 года и т. Д.), А не группировать их по типу яблока (красные вкусные яблоки, яблоки mcintosh и т. Д.), У вас будет доступ к данные для каждого столбца и затем могут отображать соответствующую информацию. Таким образом, группировка будет напоминать, как структурируются ваши данные, и у вас будет доступ к информации, необходимой для предоставления всей информации за этот год, или просто отобразите информацию, относящуюся к этому конкретному сегменту.

Это называется «гнездование» в соответствии с веб-сайтом d3js. Майк Босток (создатель d3) имеет excellent article о понимании вложенности и о том, как использовать его для удовлетворения ваших потребностей.

Mike Bostock имеет отличный пример использования этой техники here