D3圖表的角度指令不渲染

Question

我是基於this pen

實施基於D3角指令這是我的代碼。 Codepen link

angular.module('myApp', []). 
 
    //camel cased directive name 
 
    //in your HTML, this will be named as bars-chart 
 
    directive('barsChart', function ($parse) { 
 
     
 
    
 
    var directiveDefinitionObject = { 
 
     restrict: 'E', 
 
     replace: false, 
 
     scope: {data: '=chartData'}, 
 
     link: function (scope, element, attrs) { 
 
      var chords, h, strings, w; 
 
      w = 32; 
 
      h = 32; 
 
      strings = ['E', 'B', 'G', 'D', 'A', 'E']; 
 
      console.log('----------****',d3.select(element[0])); 
 
      //console.log(d3.select(element[0]).selectAll('div').data(scope.data).enter().append('div')); 
 
      //console.log(d3.select(element[0]).selectAll('div').data(scope.data).enter().append('div')); 
 

 
      d3.select(element[0]).selectAll('div').data(scope.data).enter().append('div').groups 
 
      //attr({'class': 'chord'}) 
 
       .each(function(chord, c) { 
 
       d3.select(this).append('h3').attr({ 
 
        'class': 'chord-name' 
 
       }).text(function(d) { 
 
        return d.name; 
 
       }); 
 
       return d3.select(this).append('div').attr({ 
 
        'class': 'strings' 
 
       }).selectAll('div').data(chord.strings).enter().append('div').attr({ 
 
        'class': 'string' 
 
       }).each(function(string, s) { 
 
        var _, frets; 
 
        d3.select(this).append('strong').attr({ 
 
         'class': 'string-name' 
 
        }).text(function(d, i) { 
 
         return strings[s]; 
 
        }); 
 
        frets = (function() { 
 
         var j, results; 
 
         results = []; 
 
         for (_ = j = 0; j <= 5; _ = ++j) { 
 
          results.push(false); 
 
         } 
 
         return results; 
 
        })(); 
 
        frets[chord.strings[s]] = true; 
 
        console.debug(s, frets); 
 
        return d3.select(this).append('span').attr({ 
 
         'class': 'frets' 
 
        }).selectAll('span').data(frets).enter().append('span').attr({ 
 
         'class': 'fret' 
 
        }).append('span').attr({ 
 
         'class': function(fret, f) { 
 
          return fret != false ? 'finger' : 'empty'; 
 
         } 
 
        }).html(function(fret, f) { 
 
         return fret != false ? f : '&mdash;'; 
 
        }); 
 
       }); 
 
      }); 
 
     } 
 
    }; 
 
    return directiveDefinitionObject; 
 
    
 
    
 
     
 
    }); 
 

 
function Ctrl($scope) { 
 
    $scope.chords = [ 
 
     { 
 
      name: 'C', 
 
      strings: [0, 1, 0, 2, 3, null] 
 
     }, { 
 
      name: 'D', 
 
      strings: [2, 3, 2, 0, null, null] 
 
     }, { 
 
      name: 'E', 
 
      strings: [0, 0, 1, 2, 2, 0] 
 
     }, { 
 
      name: 'F', 
 
      strings: [1, 1, 2, 3, 3, 1] 
 
     }, { 
 
      name: 'G', 
 
      strings: [3, 3, 0, null, 2, 3] 
 
     }, { 
 
      name: 'A', 
 
      strings: [0, 2, 2, 2, 0, null] 
 
     }, { 
 
      name: 'B', 
 
      strings: [2, 3, 4, 4, 2, null] 
 
     }, { 
 
      name: 'C#', 
 
      strings: [3, 4, 5, 5, 3, null] 
 
     }, { 
 
      name: 'Bm', 
 
      strings: [2, 2, 4, 4, 2, null] 
 
     }, { 
 
      name: 'Bb', 
 
      strings: [1, 3, 3, 3, 1, null] 
 
     } 
 
    ]; 
 
}

.chord { 
 
    float: left; 
 
    padding: 1.2em; 
 
    margin: .6em 0 0 .6em; 
 
    font-family: monospace; 
 
    background-color: #F0F0F0; 
 
} 
 
.chord .chord-name { 
 
    font-size: 1.6em; 
 
    color: brown; 
 
    margin-bottom: .8em; 
 
} 
 
.chord .strings .string .string-name { 
 
    padding: .4em; 
 
    padding-left: .8em; 
 
    border-radius: .8em 0 0 .8em; 
 
    background-color: gold; 
 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); 
 
} 
 
.chord .strings .string .frets { 
 
    background-color: #FFF; 
 
    border: 1px solid lightgray; 
 
    margin-top: -1px; 
 
    display: inline-block; 
 
} 
 
.chord .strings .string .frets .fret { 
 
    text-align: center; 
 
    padding: .3em; 
 
    display: inline-block; 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #dadada 44%, #a7a7a7 54%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%); 
 
} 
 
.chord .strings .string .frets .fret span { 
 
    line-height: 1.2em; 
 
    display: inline-block; 
 
    padding: .2em .4em; 
 
} 
 
.chord .strings .string .frets .fret:first-child { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    opacity: .4; 
 
} 
 
.chord .strings .string .frets .fret:not(:last-child) { 
 
    border-right: 5px ridge rgba(255, 165, 0, 0.4); 
 
} 
 
.chord .strings .string .frets .fret .finger { 
 
    border-radius: .8em; 
 
    background-color: maroon; 
 
    color: white; 
 
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.6); 
 
} 
 
.chord .strings .string .frets .fret .empty { 
 
    opacity: 0; 
 
}

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="Ctrl"> 
 
    <bars-chart chart-data="chords" ></bars-chart> 
 
</div>

似乎一切都OK，但我得到的錯誤 - 訪問每個未定義。

任何想法？

Answer 1

我拿着工作代碼筆，編譯了咖啡，並在你的指令中使用它。特別是，訪問groups屬性是問題。沒有組。組基於svg的g子元素。此圖表僅由div和span元素組成，編號爲svg。

angular.module('myApp', []). 
    //camel cased directive name 
    //in your HTML, this will be named as bars-chart 
    directive('barsChart', function ($parse) { 

     var directiveDefinitionObject = { 
      restrict: 'E', 
      replace: false, 
      scope: { 
       data: '=chartData' 
      }, 
      link: function (scope, element, attrs) { 
       var chords, h, strings, w; 
       w = 32; 
       h = 32; 
       strings = ['E', 'B', 'G', 'D', 'A', 'E']; 
        d3.select(element[0]).selectAll('div').data(scope.data).enter().append('div').attr({ 
        'class': 'chord' 
       }).each(function (chord, c) { 
        d3.select(this).append('h3').attr({ 
         'class': 'chord-name' 
        }).text(function (d) { 
         return d.name; 
        }); 
        return d3.select(this).append('div').attr({ 
         'class': 'strings' 
        }).selectAll('div').data(chord.strings).enter().append('div').attr({ 
         'class': 'string' 
        }).each(function (string, s) { 
         var _, frets; 
         d3.select(this).append('strong').attr({ 
          'class': 'string-name' 
         }).text(function (d, i) { 
          return strings[s]; 
         }); 
         frets = function() { 
          var j, results; 
          results = []; 
          for (_ = j = 0; j <= 5; _ = ++j) { 
           if (window.CP.shouldStopExecution(1)) { 
            break; 
           } 
           results.push(false); 
          } 
          window.CP.exitedLoop(1); 
          return results; 
         }(); 
         frets[chord.strings[s]] = true; 
         console.debug(s, frets); 
         return d3.select(this).append('span').attr({ 
          'class': 'frets' 
         }).selectAll('span').data(frets).enter().append('span').attr({ 
          'class': 'fret' 
         }).append('span').attr({ 
          'class': function (fret, f) { 
           return fret != false ? 'finger' : 'empty'; 
          } 
         }).html(function (fret, f) { 
          return fret != false ? f : '&mdash;'; 
         }); 
        }); 
       }); 
      } 
     } 

     return directiveDefinitionObject; 
    }); 

    function Ctrl($scope) { 
     $scope.chords = [{ 
     name: 'C', 
     strings: [0, 1, 0, 2, 3, null] 
     }, { 
     name: 'D', 
     strings: [2, 3, 2, 0, null, null] 
     }, { 
     name: 'E', 
     strings: [0, 0, 1, 2, 2, 0] 
     }, { 
     name: 'F', 
     strings: [1, 1, 2, 3, 3, 1] 
     }, { 
     name: 'G', 
     strings: [3, 3, 0, null, 2, 3] 
     }, { 
     name: 'A', 
     strings: [0, 2, 2, 2, 0, null] 
     }, { 
     name: 'B', 
     strings: [2, 3, 4, 4, 2, null] 
     }, { 
     name: 'C#', 
     strings: [3, 4, 5, 5, 3, null] 
     }, { 
     name: 'Bm', 
     strings: [2, 2, 4, 4, 2, null] 
     }, { 
     name: 'Bb', 
     strings: [1, 3, 3, 3, 1, null] 
     }]; 
    }