Question

所以我不知道是否有其他人经历过这种情况。

我正在使用nvd3创建一些行图表。如果useInteractiveGuideline为true，当我将鼠标悬停在线条上时，小工具提示会按原样显示，但不知何故，它会因某些轴刻度而混乱，导致它们消失或无法正确显示。

这只是放大/缩小，向上/向下滚动以恢复刻度的问题。

我只是在nvd3实时代码网站中使用javascript代码。

    nv.addGraph(function() {
    var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
;

 chart.xAxis
.axisLabel('Time (ms)')
.tickFormat(d3.format(',r'))
;

chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format('.02f'))
;

 d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart)
;

nv.utils.windowResize(chart.update);

return chart;
});

和数据：

    [
{
"values": [
  {
    "x": 1347663600,
    "y": 1.2790000438690186
  },
  {
    "x": 1350255600,
    "y": 1.2717000246047974
  },
  {
    "x": 1352937600,
    "y": 1.262649953365326
  },
  {
    "x": 1355529600,
    "y": 1.287500023841858
  },
  {
    "x": 1358208000,
    "y": 1.2908499836921692
  },
  {
    "x": 1360886400,
    "y": 1.267799973487854
  },
  {
    "x": 1363305600,
    "y": 1.350600004196167
  },
  {
    "x": 1365980400,
    "y": 1.3437999486923218
  },
  {
    "x": 1368572400,
    "y": 1.343999981880188
  },
  {
    "x": 1371250800,
    "y": 1.344099998474121
  },
  {
    "x": 1373842800,
    "y": 1.3225199580192566
  },
  {
    "x": 1376521200,
    "y": 1.3444000482559204
  },
  {
    "x": 1379199600,
    "y": 1.3273500204086304
  },
  {
    "x": 1381791600,
    "y": 1.3446999788284302
  },
  {
    "x": 1384473600,
    "y": 1.347499966621399
  },
  {
    "x": 1387065600,
    "y": 1.3476499915122986
  },
  {
    "x": 1389744000,
    "y": 1.350600004196167
  },
  {
    "x": 1392422400,
    "y": 1.3508000373840332
  },
  {
    "x": 1394841600,
    "y": 1.3692998886108398
  },
  {
    "x": 1397516400,
    "y": 1.381890058517456
  },
  {
    "x": 1400108400,
    "y": 1.3828500509262085
  },
  {
    "x": 1402786800,
    "y": 1.4433000087738037
  }
],
"key": "Median Senior OC",
"color": "#f9b800"
 },
 {
 "values": [
  {
    "x": 1347663600,
    "y": 1.149999976158142
  },
  {
    "x": 1350255600,
    "y": 1.149999976158142
  },
  {
    "x": 1352937600,
    "y": 1.149999976158142
  },
  {
    "x": 1355529600,
    "y": 1.1430000066757202
  },
  {
    "x": 1358208000,
    "y": 1.149999976158142
  },
  {
    "x": 1360886400,
    "y": 1.149999976158142
  },
  {
    "x": 1363305600,
    "y": 1.1459999680519104
  },
  {
    "x": 1365980400,
    "y": 1.149999976158142
  },
  {
    "x": 1368572400,
    "y": 1.149999976158142
  },
  {
    "x": 1371250800,
    "y": 1.149999976158142
  },
  {
    "x": 1373842800,
    "y": 1.149999976158142
  },
  {
    "x": 1376521200,
    "y": 1.149999976158142
  },
  {
    "x": 1379199600,
    "y": 1.1509999632835388
  },
  {
    "x": 1381791600,
    "y": 1.149999976158142
  },
  {
    "x": 1384473600,
    "y": 1.1509999632835388
  },
  {
    "x": 1387065600,
    "y": 1.149999976158142
  },
  {
    "x": 1389744000,
    "y": 1.149999976158142
  },
  {
    "x": 1392422400,
    "y": 1.149999976158142
  },
  {
    "x": 1394841600,
    "y": 1.149999976158142
  },
  {
    "x": 1397516400,
    "y": 1.149999976158142
  },
  {
    "x": 1400108400,
    "y": 1.149999976158142
  },
  {
    "x": 1402786800,
    "y": 1.149999976158142
  }
],
"key": "Median Trigger",
"color": "#34418f"
}
]

我抱歉没有放一个jsfiddle，但是代码和它完全相同 http://nvd3.org/livecode。唯一的区别是代替.datum(data()) 我有.datum(data)。

谢谢

当useInteractiveGuideline为true时，nvd3轴标记出现并消失

0 个答案: