title: d3.v3.min.js:1 Error: <svg> attribute height: Expected length, "NaN" while loading a d3 chart in a modal popup
body: <p>I have been trying to load a bigger size chart in modal popup onClick of smaller chart . I have made the chart responsive by resizing it's viewbox . But the issue i am now facing is that the first chart is becoming responsive and loading on the main page . But when i am clicking that graph to load a bigger chart in viewbox , i am getting an error d3.v3.min.js:1 Error:  attribute height: Expected length, "NaN" . </p>
  
  <p>And the strange thing is i am using the same directive &amp; same controller for both the charts , for the first chart the viewbox width is giving a value but for other it's giving NaN . </p>
  
  <p>Any help is appreciated thanks in advance . </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('chartApp', []);
  
  app.controller('TimeReportCtrl', ['$scope', function($scope){
  
      $scope.reportData={"other_time":0,"ais_time":0,"agendas_time":0,"preps_time":1,"meeting_time":7};
  
      console.log($scope.reportData.other_time);
  
      if(($scope.reportData.other_time== 0) &amp;&amp; ($scope.reportData.ais_time==0) &amp;&amp; ($scope.reportData.agendas_time==0) &amp;&amp; ($scope.reportData.preps_time==0) &amp;&amp; ($scope.reportData.meeting_time==0))
      {
  
          $scope.noData = false;
      }
      else
      {
         
          $scope.noData = true;
      }
  
      $scope.timeReportData=[];
  
      for(var i in $scope.reportData){
  
          $scope.timeReportData.push({labelData:i,count:$scope.reportData[i]});
      }
  
      $scope.timeReport=[];
  
  
      for(var i=0;i&lt;$scope.timeReportData.length;i++)
      {   $scope.data=(($scope.timeReportData[i]).labelData);
  
  
          switch ($scope.data){
  
              case "meeting_time":
                  $scope.timeReport.push({label:"Meeting Time",count:$scope.timeReportData[i].count});
                  break;
  
              case "ais_time":
                  $scope.timeReport.push({label:"ActionItem",count:$scope.timeReportData[i].count});
                  break;
  
              case "agendas_time" :
                  $scope.timeReport.push({label:"Agendas Preparation",count:$scope.timeReportData[i].count});
                  break;
              case "preps_time":
                  $scope.timeReport.push({label:"Meeting Preparation",count:$scope.timeReportData[i].count});
                  break;
  
              case "other_time":
                  $scope.timeReport.push({label:"Other",count:$scope.timeReportData[i].count});
                  break;
  
          }
  
      }
     
  
  
  
  }]);
  
  
  
  
  
  app.directive('timeReport', function($parse, $window){
      return{
          restrict:'EA',
  
          scope: {data: '=data'},
          link: function(scope, element, attrs) {
  
  
  
              scope.$watch('data', function (data) {
  
                  if (data) {
                      var data = scope.data;
                      var margin = {top: 20, right: 20, bottom: 30, left: 40};
                      var width = 400;
                      var height = 400;
                      var radius = Math.min(width, height) / 2;
                      var donutWidth = 50;
                      var legendRectSize = 16;
                      var legendSpacing = 6;
  
                      var color = d3.scale.category20();
                      var el=element[0];
                      var svg = d3.select(el)
                          .append('svg')
                          .attr('width', width+(margin.right+margin.left))
                          .attr('height', height+(margin.top+margin.bottom))
                          .call(responsivefy)
                          .append('g')
                          .attr('transform', 'translate(' + (width / 2) +
                              ',' + (height / 2) + ')')
                          ;
  
                      var arc = d3.svg.arc()
                          .innerRadius(radius - donutWidth)
                          .outerRadius(radius);
  
                      var pie = d3.layout.pie()
                          .value(function (d) {
                              return d.count;
                          })
                          .sort(null);
  
                      var tooltip = d3.select(el)
                          .append('div')
                          .attr('class', 'tooltip');
  
                      tooltip.append('div')
                          .attr('class', 'label');
  
                      tooltip.append('div')
                          .attr('class', 'count');
  
                      tooltip.append('div')
                          .attr('class', 'percent');
  
  
                      data.forEach(function (d) {
                          d.count = +d.count;
                          d.enabled = true;                                         // NEW
                      });
  
                      var path = svg.selectAll('path')
                          .data(pie(data))
                          .enter()
                          .append('path')
                          .attr('d', arc)
                          .attr('fill', function (d, i) {
                              return color(d.data.label);
                          })                                                        // UPDATED (removed semicolon)
                          .each(function (d) {
                              this._current = d;
                          });                // NEW
  
                      path.on('mouseover', function (d) {
                          var total = d3.sum(data.map(function (d) {
                              return (d.enabled) ? d.count : 0;                       // UPDATED
                          }));
                          var percent = Math.round(1000 * d.data.count / total) / 10;
                          tooltip.select('.label').html(d.data.label);
                          tooltip.select('.count').html(d.data.count);
                          tooltip.select('.percent').html(percent + '%');
                          tooltip.style('display', 'block');
                      });
  
                      path.on('mouseout', function () {
                          tooltip.style('display', 'none');
                      });
  
                    
  
                      var legend = svg.selectAll('.legend')
                          .data(color.domain())
                          .enter()
                          .append('g')
                          .attr('class', 'legend')
                          .attr('transform', function (d, i) {
                              var height = legendRectSize + legendSpacing;
                              var offset = height * color.domain().length / 2;
                              var horz = -2 * legendRectSize;
                              var vert = i * height - offset;
                              return 'translate(' + horz + ',' + vert + ')';
                          });
  
                      legend.append('rect')
                          .attr('width', legendRectSize)
                          .attr('height', legendRectSize)
                          .style('fill', color)
                          .style('stroke', color)
                          .on('click', function (label) {
                              var rect = d3.select(this);
                              var enabled = true;
                              var totalEnabled = d3.sum(data.map(function (d) {
                                  return (d.enabled) ? 1 : 0;
                              }));
  
                              if (rect.attr('class') === 'disabled') {
                                  rect.attr('class', '');
                              } else {
                                  if (totalEnabled &lt; 2) return;
                                  rect.attr('class', 'disabled');
                                  enabled = false;
                              }
  
                              pie.value(function (d) {
                                  if (d.label === label) d.enabled = enabled;
                                  return (d.enabled) ? d.count : 0;
                              });
  
                              path = path.data(pie(data));
  
                              path.transition()
                                  .duration(750)
                                  .attrTween('d', function (d) {
                                      var interpolate = d3.interpolate(this._current, d);
                                      this._current = interpolate(0);
                                      return function (t) {
                                          return arc(interpolate(t));
                                      };
                                  });
                          });
  
                      legend.append('text')
                          .attr('x', legendRectSize + legendSpacing)
                          .attr('y', legendRectSize - legendSpacing)
                          .text(function (d) {
                              return d;
                          });
  
  
  
                  }
  
                  function responsivefy(svg) {
                      console.log("inside responsivefy");
                      // get container + svg aspect ratio
                      var container = d3.select(svg.node().parentNode),
                          width = parseInt(svg.style("width")),
                          height = parseInt(svg.style("height")),
                          aspect = width / height;
                          console.log("width of container");
                      console.log(width);
  
                      console.log(container.style("width"));
  
                      svg.attr("viewBox", "0 0 " + width + " " + height)
                          .attr("perserveAspectRatio", "xMinYMid")
                          .call(resize);
  
  
  
                      d3.select(window).on("resize." + container.attr("id"), resize);
  
                      // get width of container and resize svg to fit it
                      function resize() {
  
                          var targetWidth = parseInt(container.style("width"));
                          console.log(targetWidth);
                          svg.attr("width", targetWidth);
                          svg.attr("height", Math.round(targetWidth / aspect));
                      }
                  };
              })
          }
      };
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tooltip {
      background: #eee;
      box-shadow: 0 0 5px #999999;
      color: #333;
      display: none;
      font-size: 12px;
      left: 130px;
      padding: 10px;
      position: absolute;
      text-align: center;
      top: 95px;
      width: 80px;
      z-index: 10;
  }
  .legend {
      font-size: 7px;
  }
  rect {
      cursor: pointer;
      stroke-width: 2;
  }
  rect.disabled {
      fill: transparent !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="report.css" type="text/css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.3/angular-moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  
  
  &lt;div ng-app="chartApp"&gt;
  
  
      &lt;div class="col-lg-6 col-sm-12" data-toggle="modal" data-target="#myModal" style="
          width: 700px;
      "&gt;
  
  
          &lt;div  class="panel panel-default" ng-controller="TimeReportCtrl" ng-show="noData"  style="
          width: 50%;
          height: 50%;
      " &gt;
              &lt;div class="panel-heading"&gt;Monthly User Report&lt;/div&gt;
  
  
  
  
              &lt;div   class="panel-body"  &gt;
  
  
                  &lt;div time-report data="timeReport"&gt;&lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      
      &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title" id="myModalLabel"&gt;Reports&lt;/h4&gt;
                  &lt;/div&gt;
  
                  &lt;div class="modal-footer"&gt;
                      &lt;div  class="panel panel-default" ng-controller="TimeReportCtrl" ng-show="noData"  &gt;
                          &lt;div class="panel-heading"&gt;Monthly User Report&lt;/div&gt;
  
  
  
  
                          &lt;div   class="panel-body"  &gt;
  
  
                              &lt;div time-report data="timeReport"&gt;&lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- /.modal-content --&gt;
              &lt;/div&gt;
              &lt;!-- /.modal-dialog --&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>