在 angular nvd3 折线图中显示当前时间

Question

我想将当前时间的垂直 "Now" 标记添加到使用 angular-nvd3-指令实现的工作时间序列折线图中。有点像这样：http://i.imgur.com/XsmfOXe.jpg

之前我使用纯 d3.js 构建此图表并让它工作。所以我尝试将我现有的解决方案移植到这样的指令：

myApp.directive( 'nowMarker', function () {
  return {
      restrict: 'A',
      link: function (scope, element, attr) {
          var line = d3.svg.line()
            .interpolate("basis")
            // ####### this cannot work #######
            .x(function (d) { return x(d.t); })
            .y(function (d) { return y(d.value); });
            // ################################

          element.children()[0].append('svg:path')
            .attr("class", "NOW")
            .attr('d', line(scope.nowData))
            .attr('stroke', '#14022B')
            .attr('stroke-width', '1px')
            .attr('stroke-dasharray', ('5,5'))
            .attr('fill', 'none');
        }
    };
});

这就是我卡住的地方。我不知道如何访问 angularjs-nvd3-directives 图表的 x 和 y 刻度。

HTML是：

<nvd3-line-chart nowMarker ...>
</nvd3-line-chart>

在我的图表控制器中我有：

var now = new Date();
$scope.nowData = [
        {name: "NOW", t: now, value: 0}, 
        {name: "NOW", t: now, value: 100}
    ];

没有错误消息，只是什么也没发生。

非常感谢任何帮助。谢谢！班纳特

Answer 1

如果其他人觉得这有用：

我最终在我的图表数据中添加了一个 "NOW" 系列并为其分配了特定的颜色。

var tNow = new Date();
var sNow = {
    key: "NOW",
    values: [
        [tNow, 0],
        [tNow, max]
    ],
    color: '#FFFFFF'
};

在 angular nvd3 折线图中显示当前时间

Show current time in angular nvd3 line chart

javascript

nvd3.js

angularjs-directive

angularjs-nvd3-directives