D3.js 突出显示c3js图表的MouseOver上的数据标签

我试图使用c3js的onMouseover api包含数据标签高亮显示，而不是工具提示（这只是高亮显示x轴的数据标签，而不是在工具提示中显示）

但当我尝试查看数据时，它（函数）并没有给我任何东西。我相信有一种不同的方法可以做到这一点

我的小提琴：

我的代码：

var stuff = [{
    "year": 2015,
    "month": 12,
    "s1": 0.38,
    "s2": 100,
    "s3": 22.2,
    "s4": 61,
    "s5": -7,
  },
  {
    "year": 2016,
    "month": 1,
    "s1": 0.39,
    "s2": 101,
    "s3": 22.12,
    "s4": 62,
    "s5": -6.0,
  },
  {
    "year": 2016,
    "month": 2,
    "s1": 0.43,
    "s2": 102,
    "s3": 22.11,
    "s4": 65,
    "s5": -5.7,
  },
  {
    "year": 2016,
    "month": 3,
    "s1": 0.40,
    "s2": 103,
    "s3": 22.07,
    "s4": 63,
    "s5": -5.3,
  },
  {
    "year": 2016,
    "month": 4,
    "s1": 0.39,
    "s2": 104,
    "s3": 22.04,
    "s4": 61,
    "s5": -7.0,
  },
  {
    "year": 2016,
    "month": 5,
    "s1": 0.38,
    "s2": 105,
    "s3": 22.2,
    "s4": 56,
    "s5": -11.3,
  },
  {
    "year": 2016,
    "month": 6,
    "s1": 0.38,
    "s2": 106,
    "s3": 22.05,
    "s4": 56,
    "s5": -12.8,
  },
  {
    "year": 2016,
    "month": 7,
    "s1": 0.37,
    "s2": 102,
    "s3": 22.7,
    "s4": 58,
    "s5": -9.7,
  },
  {
    "year": 2016,
    "month": 8,
    "s1": 0.37,
    "s2": 105,
    "s3": 21.20,
    "s4": 53,
    "s5": -6.2,
  },
  {
    "year": 2016,
    "month": 9,
    "s1": 0.35,
    "s2": 108,
    "s3": 20.52,
    "s4": 64,
    "s5": -5.3,
  },
  {
    "year": 2016,
    "month": 10,
    "s1": 0.37,
    "s2": 103,
    "s3": 20.92,
    "s4": 62,
    "s5": -3.3,
  },
  {
    "year": 2016,
    "month": 11,
    "s1": 0.36,
    "s2": 107,
    "s3": 21.11,
    "s4": 51,
    "s5": -5.7,
  },
  {
    "year": 2016,
    "month": 12,
    "s1": 0.37,
    "s2": 114,
    "s3": 22.08,
    "s4": 56,
    "s5": -8.3,
  },
  {
    "year": 2017,
    "month": 1,
    "s1": 0.35,
    "s2": 103,
    "s3": 22.07,
    "s4": 56,
    "s5": -7.2,
  },
  {
    "year": 2017,
    "month": 2,
    "s1": 0.36,
    "s2": 108,
    "s3": 22.2,
    "s4": 63,
    "s5": -9.0,
  },
  {
    "year": 2017,
    "month": 3,
    "s1": 0.37,
    "s2": 96,
    "s3": 25.67,
    "s4": 62,
    "s5": -9.4,
  },
  {
    "year": 2017,
    "month": 4,
    "s1": 0.38,
    "s2": 102,
    "s3": 21.94,
    "s4": 63,
    "s5": -9.5,
  },
  {
    "year": 2017,
    "month": 5,
    "s1": 0.35,
    "s2": 114,
    "s3": 22.07,
    "s4": 61,
    "s5": -9.0,
  },
  {
    "year": 2017,
    "month": 6,
    "s1": 0.36,
    "s2": 103,
    "s3": 21.51,
    "s4": 54,
    "s5": -9.7,
  },
  {
    "year": 2017,
    "month": 7,
    "s1": 0.36,
    "s2": 107,
    "s3": 22.2,
    "s4": 65,
    "s5": -11.3,
  },
  {
    "year": 2017,
    "month": 8,
    "s1": 0.35,
    "s2": 108,
    "s3": 20.2,
    "s4": 61,
    "s5": -12.8,
  },
  {
    "year": 2017,
    "month": 9,
    "s1": 0.36,
    "s2": 103,
    "s3": 22.15,
    "s4": 50,
    "s5": -8,
  },
  {
    "year": 2017,
    "month": 10,
    "s1": 0.37,
    "s2": 112,
    "s3": 22.07,
    "s4": 65,
    "s5": -9,
  },
];

var xAxisDates = [];

xAxisDates.push('x')
for (var i = 0; i < stuff.length; ++i) {
  xAxisDates.push(stuff[i]["year"] + '-' + stuff[i]["month"] + '-1');
}

var factor = {
  s1: 10,
  s2: 0.08,
  s3: 0.52,
  s4: 0.18,
  s5: 20
};

var vals1 = [];
vals1.push('data1');
for (var i = 0; i < stuff.length; ++i) {
  vals1.push(stuff[i]["s1"] * factor.s1)
};

var vals2 = [];
vals2.push('data2');
for (var i = 0; i < stuff.length; ++i) {
  vals2.push(stuff[i]["s2"] * factor.s2)
};

var vals3 = [];
vals3.push('data3');
for (var i = 0; i < stuff.length; ++i) {
  vals3.push(stuff[i]["s3"] * factor.s3)
};

var vals4 = [];
vals4.push('data4');
for (var i = 0; i < stuff.length; ++i) {
  vals4.push(stuff[i]["s4"] * factor.s4)
};
var vals5 = [];
vals5.push('data5');
for (var i = 0; i < stuff.length; ++i) {
  vals5.push((stuff[i]["s5"] + factor.s5))
};

var chart = c3.generate({
  size: {
    width: 2000,
    height: 600
  },
  onmouseover: onMouseover,

  data: {
    type: 'spline',
    groups: [
      ['data1', 'data2', 'data3', 'data4', 'data5']
    ],
    order: null,
    x: 'x',
    columns: [xAxisDates, vals1, vals2, vals3, vals4, vals5],
    labels: {
      format: {
        data1: function(value, id, i, j) {
          return value / factor.s1 + "%"
        },
        data2: function(value, id, i, j) {
          return Math.round(value / factor.s2);
        },
        data3: function(value, id, i, j) {
          return value / factor.s3 + "%"
        },
        data4: function(value, id, i, j) {
          return Math.round(value / factor.s4) + "%"
        },
        data5: function(value, id, i, j) {
          return (value - factor.s5).toFixed(1);
        }
      }
    },
    colors: {
      data1: '#ff6666',
      data2: '#737575',
      data3: '#27A5CF',
      data4: '#C9BC22',
      data5: '#4D4B39'
    }
  },

  tooltip: {
    format: {
      value: function(value, ratio, id) {
        if (id == 'data1') {
          return value / factor.s1 + "%";
        }
        if (id == 'data2') {
          return (value / factor.s2).toFixed(2);
        }
        if (id == 'data3') {
          return value / factor.s3 + "%";
        }
        if (id == 'data4') {
          return Math.round(value / factor.s4) + "%"
        }
        if (id == 'data5') {
          return (value - factor.s5).toFixed(1);
        }

      }
    },
  },
  axis: {
    y: {
      min: 0,
      max: 60,
      padding: {
        top: 0,
        bottom: 0
      }
    },
    x: {
      type: 'timeseries',
      padding: {
        top: 0,
        bottom: 0,
        left:0
      },
      tick: {
        values: ['2015-12-01', '2016-02-01', '2016-04-01', '2016-06-01', '2016-08-01', '2016-10-01', '2016-12-01', '2017-02-01', '2017-04-01', '2017-06-01', '2017-08-01', '2017-10-01'],
        format: "%b-%y",

      }
    }
  },
  padding: {
    right: 30
  },
  point: {
    show: false
  }
});

function onMouseover(elemData) {
    console.log(elemData);
}

var stuff=[{
“年份”：2015年，
“月”：12，
“s1”：0.38，
“s2”：100，
“s3”：22.2，
“s4”：61，
“s5”：-7，
},
{
“年份”：2016年，
“月”：1，
“s1”：0.39，
“s2”：101，
“s3”：22.12，
“s4”：62，
“s5”：-6.0，
},
{
“年份”：2016年，
“月”：2，
“s1”：0.43，
“s2”：102，
“s3”：22.11，
“s4”：65，
“s5”：-5.7，
},
{
“年份”：2016年，
“月”：3，
“s1”：0.40，
“s2”：103，
“s3”：22.07，
“s4”：63，
“s5”：-5.3，
},
{
“年份”：2016年，
“月”：4，
“s1”：0.39，
“s2”：104，
“s3”：22.04，
“s4”：61，
“s5”：-7.0，
},
{
“年份”：2016年，
“月”：5，
“s1”：0.38，
“s2”：105，
“s3”：22.2，
“s4”：56，
“s5”：-11.3，
},
{
“年份”：2016年，
“月”：6，
“s1”：0.38，
“s2”：106，
“s3”：22.05，
“s4”：56，
“s5”：-12.8，
},
{
“年份”：2016年，
“月”：7，
“s1”：0.37，
“s2”：102，
“s3”：22.7，
“s4”：58，
“s5”：-9.7，
},
{
“年份”：2016年，
“月”：8，
“s1”：0.37，
“s2”：105，
“s3”：21.20，
“s4”：53，
“s5”：-6.2，
},
{
“年份”：2016年，
“月”：9，
“s1”：0.35，
“s2”：108，
“s3”：20.52，
“s4”：64，
“s5”：-5.3，
},
{
“年份”：2016年，
“月”：10，
“s1”：0.37，
“s2”：103，
“s3”：20.92，
“s4”：62，
“s5”：-3.3，
},
{
“年份”：2016年，
“月”：11，
“s1”：0.36，
“s2”：107，
“s3”：21.11，
“s4”：51，
“s5”：-5.7，
},
{
“年份”：2016年，
“月”：12，
“s1”：0.37，
“s2”：114，
“s3”：22.08，
“s4”：56，
“s5”：-8.3，
},
{
“年份”：2017年，
“月”：1，
“s1”：0.35，
“s2”：103，
“s3”：22.07，
“s4”：56，
“s5”：-7.2，
},
{
“年份”：2017年，
“月”：2，
“s1”：0.36，
“s2”：108，
“s3”：22.2，
“s4”：63，
“s5”：-9.0，
},
{
“年份”：2017年，
“月”：3，
“s1”：0.37，
“s2”：96，
“s3”：25.67，
“s4”：62，
“s5”：-9.4，
},
{
“年份”：2017年，
“月”：4，
“s1”：0.38，
“s2”：102，
“s3”：21.94，
“s4”：63，
“s5”：-9.5，
},
{
“年份”：2017年，
“月”：5，
“s1”：0.35，
“s2”：114，
“s3”：22.07，
“s4”：61，
“s5”：-9.0，
},
{
“年份”：2017年，
“月”：6，
“s1”：0.36，
“s2”：103，
“s3”：21.51，
“s4”：54，
“s5”：-9.7，
},
{
“年份”：2017年，
“月”：7，
“s1”：0.36，
“s2”：107，
“s3”：22.2，
“s4”：65，
“s5”：-11.3，
},
{
“年份”：2017年，
“月”：8，
“s1”：0.35，
“s2”：108，
“s3”：20.2，
“s4”：61，
“s5”：-12.8，
},
{
“年份”：2017年，
“月”：9，
“s1”：0.36，
“s2”：103，
“s3”：22.15，
“s4”：50，
“s5”：-8，
},
{
“年份”：2017年，
“月”：10，
“s1”：0.37，
“s2”：112，
“s3”：22.07，
“s4”：65，
“s5”：-9，
},
];
var xAxisDates=[]；
xAxisDates.push（'x'）
对于（变量i=0；idata: {
      onmouseover: onMouseover,
      onmouseout: onMouseout,

  ...
}

function onMouseover(elemData) {
    var id = elemData.name;
    if (id==undefined) id = elemData.id;
    var el = d3 .select('.c3-chart-texts')
     .selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
     el.style("stroke", "red");
}

function onMouseout(elemData) {
    var id = elemData.name;
    if (id==undefined) id = elemData.id;
    var el = d3 .select('.c3-chart-texts')
     .selectAll(".c3-chart-text > .c3-texts-"+id+" > .c3-text-"+elemData.index);
     el.style("stroke", "none");
}