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

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

一切似乎＆＃39;工作，除了数据要么没有通过或它没有更新条形图。

我已经对这个问题猛烈抨击了几天，但无济于事。最初我考虑将年度数据放在单独的数组中，只是在鼠标悬停时从数据源转换到数据源，但这似乎是落后的和不必要的。

Answer 1

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

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

这是一个更新的example。

Answer 2

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

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

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

2 个答案: