javascript - 将 d3 与自定义 Angular Directive(指令)集成

Question

我正在开发一个应用程序，它使用 Angular 来保持来自几个不同服务的数据同步，并将这些数据传递给一些 d3 函数来生成图形和表格。

现在，我很难在 d3 代码中将数据绑定(bind)到正确的级别。我现在正在创建一个基本表格。

这是我的指令:

application.directive('d3table', function() {
   var chart = table();
   return  {
       restrict: 'E',
       scope: {
        data: "="
       },
       link: function(scope, element, attrs) {
           scope.$watchCollection('data', function(data) {
               d3.select(element[0]).datum(data).call(chart);
           });
       }
   }
});

我的 table() d3 代码如下，使用 toward reusable charts方法:

function tableChart() {
    function chart(selection) {
        selection.each(function(dataset) {
            var table = d3.select(this).append('table');

            table.append('thead').append('tr')
              .selectAll('tr').data(columns).enter()
              .append('th').text(function(d) { return d;});
    }
    return chart;
}

我在这里工作的数据是一个简单的数组。数据会定期添加和删除。

我遇到的问题是，附加数据不是更新现有表，而是触发新表的生成。所以我最终得到了多个表，而不是一个正确绑定(bind)到 d3 函数的表。

Answer 1

您可以事先删除表格。

function tableChart() {
    function chart(selection) {
        selection.each(function(dataset) {
            //remove existing table
            d3.select(this).select("table").remove();

            var table = d3.select(this).append('table');

            table.append('thead').append('tr')
              .selectAll('tr').data(columns).enter()
              .append('th').text(function(d) { return d;});
    }
    return chart;
}