将d3与自定义的角度指令集成

Question

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

现在，我很难在d3代码中以正确的级别绑定数据。 此时我正在创建一个基本表。

这是我的指令：

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代码如下，使用了朝可重用图表的方法：

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;
}

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

我遇到的问题是，添加数据而不是更新现有表，而是触发了新表的生成。 因此，我最终得到多个表，而不是正确绑定到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;
}

Answer 2

我将使用一个模板，基本上只在其中包含您的表和表头信息，然后在链接函数中可以获取对该表的引用。 然后在watch collection函数中，您仅添加或删除行，而不是每次都尝试重新创建整个表。 只要您的数据方案保持不变，这种方法就可以工作。

这是一些代码要看

//js
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'D3 Angular Table';

  $scope.data = [1,2,3,4,5,6,7,8];


  $scope.add = function(){
    console.log('add');
    $scope.data.push(Math.floor(Math.random() * 100) );
  };

   $scope.remove = function(){
    console.log("remove")
     $scope.data.splice(0, 1)
  };
});




app.directive('d3table', function() {
   //var chart = table();
   return  {
       restrict: 'E',
       scope: {
        data: "="
       },
      templateUrl: 'd3table.html',
       link: function(scope, element, attrs) {

           var table = element[0].firstChild;

           scope.$watchCollection('data', function(data) {

             var selectedTable = d3.select(table).selectAll('tr').data(data);

              selectedTable.enter()
              .append("tr")
              .text(function(d){return d});

              selectedTable.exit().remove();

           });
       }
   }
});
//html
<table id = "test" >
  <thead>
     <tr><th>Value</th></tr>
  </thead>
</table>

工作勤奋

http://plnkr.co/edit/hb6t9gshXBngApUGyJkN?p=预览