使用带角度的d3时间轴

Question

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

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

Answer 1

希望这是关于角1.

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

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

制定一个指令来挂钩这个div via属性.

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.

在这里工作代码