javascript - D3 Stacked Bar Chart 中引用 JS 数组

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

编辑:或者，有没有办法只获取事件分段的 ID/ key 而不是所有分段？

Answer 1

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

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

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

Mike Bostock 有一个使用此技术的绝佳示例 here