title: d3.js two graphs on same page is on top of each other
body: <p>I have 2 graphs each in separate angular directive</p>
  
  <pre><code>&lt;chart1 ng-model="data" style="display:block;" id="plot1" class="ng-pristine ng-valid"&gt;
  &lt;svg width="960" height="500" style="right: 0px;"&gt;Some data&lt;/svg&gt;
  &lt;/chart1&gt;
  &lt;chart2 ng-model="data" style="display:block;" id="plot1" class="ng-pristine ng-valid"&gt;
  &lt;svg width="960" height="500" style="right: 0px;"&gt;Some data&lt;/svg&gt;
  &lt;/chart2&gt;
  </code></pre>
  
  <p>chart1 generation of svg:</p>
  
  <pre><code>           var svg = d3.select("#plot1").append("svg")
                 .attr("width", width + margin.left + margin.right)
                 .attr("height", height + margin.top + margin.bottom).style({'right': '0'});
  </code></pre>
  
  <p>chart 2 : </p>
  
  <pre><code>               var svg = d3.select("#plot2").append("svg")
                 .attr("width", width + margin.left + margin.right)
                 .attr("height", height + margin.top + margin.bottom).style({'right': '0'});
  </code></pre>
  
  <p>for some reason those two graphs ends on top of each other, in html i can see that svg is stylled as position: absolute. if i remove this style everything works, but it i sstyle this way for a reason probably... </p>
  
  <p>i come accross this guid: <a href="http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html" rel="nofollow">http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html</a></p>
  
  <p>but it didnt helped.</p>
  
  <p>How can i solve this problem? </p>