Javascript D3：将对象数组数据传递到鼠标上方的条形图

使用D3中的两个图表。我有一个饼图聊天，显示有关预算的家长数据。当用户将鼠标移到饼图切片上时，我试图将该切片的数组数据推送到条形图上

我的数据设置如下：

 {"Department":"Judiciary",
    "Funds1415":317432,
    "Fundsb":"317.4",
    "annual": [ 282,288,307,276,276,298,309,317,317 ]  
  },

我正试图使用此函数将年度数组传递到条形图：

 path.on('mouseover', function(d) { 
...
  bars.selectAll('rect').transition().attr("y", function(d) { return h - d.data.annual /125; });
  bars.selectAll('rect').transition().attr("height", function(d) { return d.data.annual / 125; });
}); 

这是我试图发送给的柱状图：

var bars = svg.selectAll("rect")
   .data(budget)
   .enter()
   .append("rect")
    .attr("class", "barchart")
    .attr("transform", "translate(26,109)")
    .attr("fill", function(d, i) {
        return color2(i);
    })
   .attr('class', 'barchart')
   .attr("x", function(d, i) {
    return i * 14;  
})
   .attr("width", 12)
    .attr("y", 100)
    .attr("height", 100);

此处链接到完整代码：

一切似乎都在运转，除了数据没有传递或没有更新条形图

---

几天来，我一直在为这个问题绞尽脑汁，但毫无结果。起初，我想将年度数据放在单独的数组中，然后在鼠标上方从数据源转换到数据源，但这似乎是倒退和不必要的。

首先，您的选择器是错误的<代码>栏已经是一组矩形，因此无法重新选择这些矩形。其次，您还没有将“更新的”数据绑定到这些rect。因此，考虑到这一点，它变成：

bars
  .data(d.data.annual)
  .transition()
  .attr("height", function(d) { 
    return d / 125; 
  })
  .attr("y", function(d) { 
    return h - d /125; 
  });

---

这是一个更新的。

我从您的代码和注释中了解到的是，您的油炸圈饼图有数据点，每个数据对象都包含一个名为“年度”的属性，您希望将其用作条形图的输入数据

您应该调用一个单独的函数来绘制条形图，并将其传递给年度数据数组

清除“mouseout”事件上的现有条形图，以便在下一个“mouseover”事件上绘制新条形图。可以使用jQuery

empty（）

函数清除图表容器

---

我认为您需要在鼠标上方传递相应的数据，即当前弧的数据对象，并根据

年度

数组创建或更新条形图。但在上面的代码中，您似乎只设置了一次条形图，而在悬停时，您将条形图设置为一个恒定的高度。首先，将所有条形图元素（轴和矩形）放在一个g中，并将其归类为“条形图”。从其余元素中删除所有“条形图”分类。将转换应用于“g”本身。感谢您的回复。我仍然在鼠标上方收到一个“数据未定义”错误。我对D3有些陌生，不完全确定在单个arc数组中传递的语法。与其预先绘制条形图并将其隐藏，不如将其创建为一个函数，然后用鼠标在相应的数据数组上调用该函数？