使用D3进行多饼图交互的多级嵌套

Question

我是d3的新手，想创建一个交互式饼图。我能够绘制不同的馅饼，但是当我鼠标悬停时，我无法通过功能名称获得个人成本以显示在馅饼上。当我尝试显示d.data.functionCost时，我收到一个未定义的。

这是我迄今为止所取得的成就......

我使用d3.nest来嵌套每年的总数，并使用d3.nest下面的年份捕获所有单个函数名称总计

var donut_data = d3.nest()
    .key(function(d){return d.projectdate; })
    .key(function(d){return d.FunctionName; })
    .rollup(function(d){
      return { 'functionCost': d3.sum(d, function(c){
            return +c.Cost;
          })
        }
     })
    .entries(vmData)
    .map(function(group){
      var total = 0;
      group.values.forEach(function(d){
        total += d.values.functionCost;
      })
      return {
        'FiscalYear': group.key,
        'yearCost': total,
        'data': group.values.map(function(v){
          // console.log(v.values.functionCost);
          return {
            'FunctionName': v.key,
            'functionCost': v.values.functionCost
          }
        })
       };
    });

    return donut_data;
}

这是应该显示功能成本的部分。该值未定义，百分比为NaN。我认为它与d.data.functionCost有关，不知道d.data的索引是什么，但我不知道如何解决它。任何帮助将不胜感激。

var eventObj = {

            'mouseover': function(d, i, j) {
                pathAnim(d3.select(this), 1);
                var thisDonut = charts.select('.type' + j);
                // console.log (thisDonut);
                thisDonut.select('.value').text(function(d, i) {
                    return '$' + d.data.functionCost;
                });
                thisDonut.select('.percentage').text(function(d,i) {

                    return (d.data.functionCost/d.yearCost*100).toFixed(2) + '%';
                });
            },