尝试创建D3+AngularJS条形图

我想用angularjs创建一个D3条形图。这是我的指令，目前我有几个问题

该图表不是附加到指令div，而是附加到html标记 图表被多次追加，即使在调用watch时，我们只记录一次追加 当loggin d3.selectjqElm[0]时，它输出directives元素 我做错了什么

角函数d3{ "严格使用",； var isDef=角度。isDefined， aExtend=angular.extend， aCopy=angular.copy， isArray=angular.isArray， 等深线=角度。等深线， aElement=角度元素， isEqual=角度。等于； angular.module'Widgets.module' .工厂“施工人员3bar”，施工人员 .指令“tmD3Bar”，指令； 构造函数。$inject=[ “普通” ]; 指令。$inject=[ "普通",， “ConstructorD3Bar” ]; 函数构造函数common{ var cgenerator=公共发电机； 功能D3Barattrs{ 这一点； } D3Bar.prototype={ _setProps：函数p{ p=p |{}； this.id=isDefp.id？p.id:cgenerator.id； this.theme=isDefp.theme？p.theme:'D3Bar'； this.message=isDefp.message？p.message:'D3Bar'； this.data=isDefp.data？p.data:[]； this.format=isDefp.format？p.format:空； this.tsv=isDefp.tsv？p.tsv:null； this.csv=isDefp.csv？p.csv:null； this.margin=isDefp.margin？p.margin:{top:0，bottom:0，left:0，right:0}； this.boxWidth=isDefp.boxWidth？p.boxWidth:Common.$window.innerWidth； this.boxHeight=isDefp.boxHeight？p.boxHeight:Common.$window.innerHeight； this.width=isDefp.width？p.width:Common.$window.innerWidth； this.height=isDefp.height？p.height:Common.$window.innerHeight； this.init； }, init：函数{ var=这个； 如果该值为0.tsv！==null{ d3.tsvthat.tsv，函数错误，数据{ 如果isDeferr&&err&&err.status{ 开关错误状态{ 案例404： 回来 } } 数据=数据； }; } }, toString:函数{ 归还这个； } }; 返回{ 创建：功能道具{ 归还新的道具； } }; } 函数指令 常见的 构造器3bar { var指令={ templateUrl:'widgets/d3 charts/bar/bar.tpl.html'， 控制器：ctrl， 编译：编译， 范围：{ 属性：'=？' }, 替换：正确， 限制：“AC” }; 返回指令； 函数编译器元素，tAttrs{ 返回{ 前置：功能范围、jqElm、属性{ scope.initWidget=函数{ 如果！isDefscope.attrs | | scope.attrs==null{ scope.attrs=ConstructorD3Bar.create{}； } var保证金=scope.attrs.margin， 宽度=scope.attrs.boxWidth-margin.left-margin.right， 高度=scope.attrs.boxHeight-margin.top-margin.bottom； scope.attrs.width=宽度； scope.attrs.height=高度； var formatPercent=d3.format'.0%'； scope.attrs.x=d3.scale .序数 .rangeRoundBands[0，宽度]，0.1，1； scope.attrs.y=d3.scale 线性的 .范围[高度，0]； scope.attrs.xAxis=d3.svg 轴 .scalescope.attrs.x .定位“底部”； scope.attrs.yAxis=d3.svg 轴 .scalescope.attrs.y .东方“左” .百分之五十的人； }; }, 职位：职能范围、jqElm、属性{ 作用域“$destroy”上的$on，函数{}； 范围.$watch 作用{ 返回scope.attrs.data； }, 函数nValue，oValue{ 如果！n值{ 回来 } 如果nValue.length==0{ 回来 } var数据=nValue； scope.attrs.svg=d3.selectjqElm[0] .数据 进来 .append'svg' .attr'width'，scope.attrs.width+scope.attrs.margin.left+scope.attrs.margin.right .attr'height'，scope.attrs.height+scope.attrs.margin.top+scope.attrs.margin.bottom .附加“g” .attr'transform'，'translate'+scope.attrs.margin.left+'，'+scope.attrs.margin.top+； data.foreachd函数{ d、 频率=+d.频率； }; scope.attrs.x.domaindata.mapd函数{ 回信； }; scope.attrs.y.domain[0，d3.maxdata，函数d{ 返回d.frequency； }]; scope.attrs.svg.append'g' .attr'class'，'x轴' .attr'transform'，'translate0'，+scope.attrs.height+ .callscope.attrs.xAxis； scope.attrs.svg.append'g' .attr'class'，'y轴' .callscope.attrs.yAxis .append'text' .attr'transform'，'rotate-90' .attr'y'，6 .attr'dy'，'71em' .style'text-anchor'，'end' .文本“频率”； scope.attrs.svg.selectAll'.bar' .数据 .enter.append'rect' .attr'class'，'bar' .attr'x'，函数d{ 返回scope.attrs.xd.letter； } .attr'width'，scope.attrs.x.rangeBand .attr'y'，函数d{ 返回scope.attrs.yd.frequency； } .attr'height'，函数d{ 返回scope.attrs.height-scope.attrs.yd.frequency； }; } ; } }; } 函数ctrl$scope、$element、$attrs{ var vm=$scope； 如果！isDefvm.attrs | | vm.attrs==null{ vm.attrs=ConstructorD3Bar.create{}； } var attrs=vm.attrs； } } }window.angular，window.d3；

---

删除。数据。输入。选择

scope.attrs.svg=d3.selectjqElm[0] .append'svg' .attr'width'，scope.attrs.width+scope.attrs.margin.left+scope.attrs.margin.right .attr'height'，scope.attrs.height+scope.attrs.margin.top+scope.attrs.margin.bottom .附加“g” .attr'transform'，'translate'+scope.attrs.margin.left+'，'+scope.attrs.margin.top+；