工具提示在 NVD3 MultiChart 中的第二行不起作用答案

【问题标题】：Tooltip not working on second line in NVD3 MultiChart工具提示在 NVD3 MultiChart 中的第二行不起作用
【发布时间】：2016-01-13 13:51:19
【问题描述】：

我在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 值，但第二行在鼠标悬停时完全被忽略。禁用第一行会在控制台中显示以下错误：

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

并导致窗口水平溢出，这是因为显示的工具提示偏移量很大。极度缩小时可以观察到。

【问题讨论】：

标签： angularjs d3.js charts nvd3.js angular-nvd3

【解决方案1】：

我无法在 plunker 中完全重现您的问题，但我采用了您的示例数据对象并在 plunker of my own 中创建了几个额外的数据点。工具提示功能在这个 plunker 中运行良好，我认为这一定与您将值映射到 $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');

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

【讨论】：