工具提示不適用於NVD3 MultiChart中的第二行

Question

我在angular-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 

而導致窗口水平溢出，這是因爲被示出具有一個巨大的偏移工具提示。當縮小極端時可以觀察到。

Answer 1

我無法完全重現您的問題，但我拿了您的示例數據對象，並在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'); 

無論如何，可以爲時已晚，無法幫助您，但只是認爲我會提供這種將數據對象創建給可能遇到此問題的其他人的方法。