D3：在鼠标悬停时将对象数组数据传递到条形图答案

【问题标题】：D3: Passing object array data to a barchart on mouseoverD3：在鼠标悬停时将对象数组数据传递到条形图
【发布时间】：2015-02-20 18:26:08
【问题描述】：

在 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);

此处为完整代码的链接： http://jsbin.com/zayopecuto/1/edit?html,js,output

一切“似乎”都在工作，除了数据没有通过或没有更新条形图。

这几天我一直在努力解决这个问题，但无济于事。最初我想将年度数据放在单独的数组中，并在鼠标悬停时从数据源转换到数据源，但这似乎是落后且不必要的。

【问题讨论】：

我相信你需要在鼠标悬停时传入相应的数据，即当前弧的数据对象，并根据annual数组创建或更新条形图。但是在上面的代码中，您似乎设置了一次条形图，并且在悬停时，您为条形图设置了一个恒定的高度。
你的代码有几个问题。首先，所有条形图元素（轴和矩形）都在一个 g 中，并将其归类为“条形图”。从其余元素中删除所有“条形图”分类。将转换应用于“g”本身。
感谢您的回复。我仍然在鼠标悬停时收到“数据未定义”错误。我对 D3 有点陌生，并不完全确定传入单个弧数组的语法。
与其预先绘制条形图并将其隐藏，不如将其创建为函数，然后通过鼠标悬停调用具有相应数据数组的函数？

标签： javascript arrays d3.js

【解决方案1】：

首先，您的选择器错误。 bars已经是rects的集合，所以不能重新选择rects。其次，您没有将“更新”数据绑定到这些矩形。因此，考虑到这一点，它变成：

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

这是更新后的example。

【讨论】：

【解决方案2】：

我从您的代码和评论中了解到，您的圆环图有数据点，每个数据对象都包含一个名为“年度”的属性，您希望将其用作条形图的输入数据。

您应该调用一个单独的函数来绘制您的条形图并将年度数据数组传递给它。
清除'mouseout' 事件的现有条形图，以便在下一个'mouseover' 事件上绘制新的条形图。您可以使用 jQuery empty() 函数来清除图表容器。

【讨论】：