angularjs - 将 d3 时间线与 Angular 结合使用

Question

我正在寻找与 Angular 一起使用的时间线小部件、模块或指令，如下所示:http://www.cssscript.com/demo/simple-scrollable-timeline-chart-with-d3-js-d3-timeline/ (请参阅下面的 GitHub 链接)。我没有时间从头开始写这样的东西。

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

Answer 1

希望这是关于 Angular 1 的。

首先创建一个像这样的 DOM:

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

创建一个指令以通过属性 Hook 到此 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