Question

我正在寻找一个与Angular一起使用的时间轴小部件，模块或指令，看起来像这样：http://www.cssscript.com/demo/simple-scrollable-timeline-chart-with-d3-js-d3-timeline/（见下面链接到GitHub）。我没有时间从头开始写这样的东西。

令人惊讶的是，我找不到一个。如果有人指向我，或者有人可以慷慨地为https://github.com/commodityvectors/d3-timeline编写一个原生的AngularJS指令，我将不胜感激。我知道;这只是太多要求。

Answer 1

希望这是关于角度1。

首先制作一个像这样的DOM：

<div id= "chart" my-directive>Loading...</div>

制定一个指令，通过属性挂钩到这个div。

myApp.directive('myDirective', function() {
  var controller = ['$scope', function($scope) {
    var me = this;

  }];
  //define the directive object
  var directive = {};
  directive.controller = controller;
  directive.restrict = 'A';//restrict to attribute
  directive.controllerAs = 'cus';
  directive.link = function(scope, element, attrs) {
    const data = [{
            label: 'Name',
            data: [{
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 1, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 2, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 3, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 4, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 5, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 6, 1]),
                customClass: 'blue-dot'
            }]
        }, {
            label: 'Type',
            data: [{
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 1, 11])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 1, 15])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 3, 10])
            }, {
                label: 'I\'m a label with a custom class',
                type: TimelineChart.TYPE.INTERVAL,
                from: new Date([2015, 2, 1]),
                to: new Date([2015, 3, 1]),
                customClass: 'blue-interval'
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 6, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 7, 1])
            }]
        }, {
            label: 'Imp',
            data: [{
                label: 'Label 1',
                type: TimelineChart.TYPE.INTERVAL,
                from: new Date([2015, 1, 15]),
                to: new Date([2015, 3, 1])
            }, {
                label: 'Label 2',
                type: TimelineChart.TYPE.INTERVAL,
                from: new Date([2015, 4, 1]),
                to: new Date([2015, 5, 12])
            }]
        }];
    const timeline = new TimelineChart(element[0], data);
  }
  return directive;
});

在链接函数内部获取数据，稍后将元素和数据传递给TimelineChart。

工作代码here

使用带角度的d3时间轴

1 个答案: