工具提示不适用于NVD3 MultiChart中的第二行

问题描述：

我在angular-nvd3中有multiChart，它应该显示每天的销售量和总收入。工具提示不适用于NVD3 MultiChart中的第二行

<nvd3 options="options" data="data"></nvd3>

而这里的选项和数据：

$scope.options = { 
    chart: { 
     type: 'multiChart', 
     height: 450, 
     margin : { 
      top: 30, 
      right: 90, 
      bottom: 50, 
      left: 70 
     }, 
     color: d3.scale.category10().range(), 
     useInteractiveGuideline: true, 
     xAxis: { 
      axisLabel: "Day", 
      tickFormat: function(d){ 
       return d3.time.format('%b %d')(new Date(d));; 
      } 
     }, 
     yAxis1: { 
      axisLabel: "Orders", 
      tickFormat: d3.format('d') 
     }, 
     yAxis2: { 
      axisLabel: "Income (Lari)", 
      tickFormat: function(d){ 
       return Math.round(d/100) + " GEL"; 
      } 
     } 
    } 
}; 
$scope.data = [{ 
    yAxis: 2, 
    type: 'line', 
    key: "Income", 
    values: data.map(function (item) { 
     return { 
      series: 0, 
      x: new Date(item._id.year, item._id.month, item._id.day), 
      y: item.total 
     }; 
    }) 
}, 
{ 
    yAxis: 1, 
    key: "Orders", 
    type: 'line', 
    values: data.map(function (item) { 
     return { 
      series: 1, 
      x: new Date(item._id.year, item._id.month, item._id.day), 
      y: item.count 
     }; 
    }) 
}];

数据项改造前：

{ 
    "_id": { 
    "year": 2015, 
    "month": 11, 
    "day": 26 
    }, 
    "total": 1078, 
    "count": 1 
},

悬停第一行显示工具提示，显示Y值，但是第二在mouseover上完全忽略这一行。禁用第一行显示以下错误在控制台：

d3.js:5948 Error: Invalid value for <g> attribute transform="translate(NaN,NaN)" 
d3.transform @ d3.js:5948d3 
interpolateTransform @ d3.js:6049 
(anonymous function) @ d3.js:8754 
(anonymous function) @ d3.js:8945 
d3_class.forEach @ d3.js:341 
start @ d3.js:8944 
schedule @ d3.js:8912 
d3_timer_mark @ d3.js:2165 
d3_timer_step @ d3.js:2146

而导致窗口水平溢出，这是因为被示出具有一个巨大的偏移工具提示。当缩小极端时可以观察到。

答

我无法完全重现您的问题，但我拿了您的示例数据对象，并在plunker of my own中创建了几个附加数据点。工具提示功能在这个运算器中工作正常，我认为它必须与您将值映射到$scope.data对象的方式有关。

我把创建外部函数的值打造成了$scope.data阵列的方法：

function mapValues(src, dest, series, key) { 
    dest[series].values = src.map(function(item) { 
     return { 
      series: series, 
      x: new Date(item._id.year, item._id.month, item._id.day), 
      y: item[key] 
     }; 
    }) 
}

然后叫你指定带参数的功能：

$scope.data = [{ 
    yAxis: 2, 
    type: 'line', 
    key: "Income" 
}, 
{ 
    yAxis: 1, 
    key: "Orders", 
    type: 'line' 
}]; 

mapValues(json, $scope.data, 0, 'total'); 
mapValues(json, $scope.data, 1, 'count');

无论如何，可以为时已晚，无法帮助您，但只是认为我会提供这种将数据对象创建给可能遇到此问题的其他人的方法。

工具提示不适用于NVD3 MultiChart中的第二行

相关推荐