在 D3 堆积条形图中引用 JS 数组答案

【问题标题】：Reference JS array in D3 Stacked Bar Chart在 D3 堆积条形图中引用 JS 数组
【发布时间】：2015-10-10 14:01:16
【问题描述】：

我正在使用this version of a D3 stacked bar chart。

目前，当用户将鼠标悬停在条形的某个段上时，工具提示会显示活动段的值。

但是，我想添加 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/密钥而不是所有段？

【问题讨论】：

标签： javascript jquery arrays d3.js

【解决方案1】：

根据您的 Fiddle，您似乎正在根据类型对苹果进行分组，这似乎是导致您的问题的原因。

如果您要按年份（2011 年苹果、2012 年苹果等）对 (<g>) 列进行分组，而不是按苹果类型（红色美味苹果、麦金托什苹果等）将它们分组，您将可以访问到每列的数据，然后可以显示相关信息。通过这种方式，分组将与您的数据结构非常相似，您将可以访问所需的信息，以呈现该年度的所有信息，或仅显示与该特定细分相关的信息。

根据d3js 网站，这称为“嵌套”。 Mike Bostock（d3 的创建者）有一个excellent article 了解嵌套以及如何使用它来满足您的需求。

Mike Bostock 有一个很好的使用这种技术的例子here

【讨论】：