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

Question

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

Link 到这里的完整代码： http://jsbin.com/zayopecuto/1/edit?html,js,output

一切正常 'seems'，除了数据未通过或未更新条形图。

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

Answer 1

首先，您的 selector 是错误的。 bars 已经是 rect 的集合，所以你不能重新 select rect。其次，您还没有将 "updated" 数据绑定到这些矩形。所以，考虑到这一点，它变成了：

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

这是更新后的 example。

Answer 2

我从你的代码和评论中了解到，你的圆环图有数据点，每个数据对象都包含一个名为 'annual' 的属性，你想将其用作输入数据对于条形图。

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

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

D3: Passing object array data to a barchart on mouseover

javascript

arrays

d3.js