複数のdivでangularjs棒グラフを再利用する方法

Question

私はangularjsの初心者です。誰でも教えてください、再利用可能な指示ですか？はいの場合、どうすれば使用できますか？

私は1つのバーチャートディレクティブを持っている：

directive('bars1', function ($parse) { 

    return { 
    restrict: 'E', 
    scope: { 
     data: '=', 
     label: '@' 
     }, 
     replace: true, 

    link: function (scope, element, attrs) { 

     var chart = d3.select('#chart') 
     .append("div").attr("class", "chart") 
     .selectAll('div') 
     .data(scope.data).enter() 
     .append("div") 
     .transition().ease("elastic") 
     .style("width", function(d) { return (d/1000)-10 + "%"; }) 
     .text(function(d) { return d ; }); 
    } 
    }; 
    }) 

私はこの

<div id="dashboard1" > 
    <div id="bars" style="margin-top:20%"> 

    <div id="chart"> 
      <bars1 data=val></bars1> 
    </div> 
    </div> 
</div> 

<div id="dashboard2" > 
    <div id="bars" style="margin-top:20%" > 

    <div id="chart"> 
      <bars1 data=val></bars1> 
    </div> 
    </div> 


</div> 

のような2つの異なるdiv要素にディレクティブを使用したいが、それは2つのdivに2つの別々のグラフを作成するが、一つだけを作成していません最初のdivのグラフ。私を助けてください。

Answer 1

あなたはd3.select(element[0])でd3.select('#chart')を置き換える必要があります。

Answer 2

更新しますdirective：

directive('bars1', function ($parse) { 

    return { 
    restrict: 'E', 
    scope: { 
     data: '=', 
     label: '@' 
     }, 
     replace: true, 

    link: function (scope, element, attrs) { 

     var chart = d3.select(scope.label)//<--use element id rather than specific 
     .append("div").attr("class", "chart") 
     .selectAll('div') 
     .data(scope.data).enter() 
     .append("div") 
     .transition().ease("elastic") 
     .style("width", function(d) { return (d/1000)-10 + "%"; }) 
     .text(function(d) { return d ; }); 
    } 
    }; 
    }) 

そして、あなたがHTML：

<div id="dashboard1" > 
    <div id="bars" style="margin-top:20%"> 

    <div id="chart1"><!--use different id --> 
      <bars1 data="val" label="#chart1"></bars1> 
    </div> 
    </div> 
</div> 

<div id="dashboard2" > 
    <div id="bars" style="margin-top:20%" > 

    <div id="chart2"><!--use different id --> 
      <bars1 data="val" label="#chart2"></bars1> 
    </div> 
    </div> 


</div>