Question

我正在实施基于this pen

的基于D3的角度指令

这是我的代码。 Codepen link

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

一切似乎都没问题但是我得到了错误 - 访问每个未定义的内容。

有什么想法吗？

Answer 1

我拿了工作的代码笔，编了咖啡，让它在你的指令里工作。具体来说，访问groups属性是问题所在。没有团体。群组基于g的{{1}}子元素。此图表仅由svg和div元素组成，不包含span。

svg

D3图表角度指令无法渲染

1 个答案: