Всплывающая подсказка не работает на второй строке в NVD3 MultiChart

Question

У меня есть multiChart в angular-nvd3, который должен отображать количество продаж и общий доход за каждый день.

<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, но вторая строка полностью игнорируется при наведении курсора мыши. Отключение первой строки показывает следующую ошибку в консоли:

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

Мне не удалось воспроизвести вашу проблему точно в планкере, но я взял ваш пример объекта данных и создал пару дополнительных точек данных в своем собственном плункере. Функциональность всплывающей подсказки работает нормально в этом элементе, и я думаю, что это связано с тем, как вы отображаете значения в $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');

В любом случае, может быть, уже слишком поздно, чтобы помочь вам, но я подумал, что я бы предложил этот способ создания вашего объекта данных кому-то еще, кто может столкнуться с этой проблемой.