title: d3.js - Object doesn't support property or method 'map'
body: <p>I am getting this error in IE9. In all other browsers - chrome, Firefox, my charts work fine. Could anyone put their thoughts on this on how to resolve this error?</p>
  
  <p>I am using d3 to create a piechart. I get the path dynamically and get appended in diDataUrlPrefix.</p>
  
  <pre><code>var width = 960,
     height = 437,
     radius = Math.min(width, height) / 2;
  var mainfile = diDataUrlPrefix + "/appsec/csvs/Legal-RAG.csv";
  
  var color = d3.scale.ordinal()
      .range(["#a00000","#Ffb400","#78a22f"]);//Ffb400
  
  
  
  
      var arc = d3.svg.arc()
      .outerRadius(radius - 45)
      .innerRadius(radius -200);
  
  
      var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) {return d.Components;});
  
      var svg = d3.select("#mainchart").append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("style","margin-right:100px;margin-left:20px;margin-top:-20px")
      .append("g")
      .attr("transform", "translate(" + width / 3.2 + "," + height /2.5 + ")");
  
      d3.csv(mainfile, function(error, data) {
          // Iterate through each status to determine if there are any components
          // Do this avoiding the use of .forEach (IE9 error)
          // VW 2013-09-29
          var length = data.length;
          for(var i=0; i&lt; length; i++) {
              var d = data[i];
              d.Components = +d.Components;
              if(d.Components &gt;0) {
                  glblcount=1;
              }
          }
  
          var g = svg.selectAll(".arc")
          .data(pie(data))
          .enter().append("g")
          .attr("class", "arc")
  
          g.append("path")
          .attr("d", arc)
          .style("fill","#FFFFFF")
          .transition()
          .ease("bounce")
          .duration(1000)
          .delay(function(d, i) {return i * 500;})
          .style("fill", function(d) {return color(d.data.Source);});
  
          g.append("text")
          .attr("transform", function(d) 
          {
              var c = arc.centroid(d);
              var param = c[1]- 20;
              var param1= c[0]- 30;
              return "translate(" + param1 + "," + param + ")";
              //return "translate(" + arc.centroid(d) + ")";
          })
          .attr("dy", ".35em")
          .style("text-anchor", "middle")
          .attr("style","font-family: Arial;border: solid 1px" )
          .style("font-color",function(d){
              if ((d.data.Source) =="Amber")
                 {
                     //alert(d.data.Source);
                     return "#000000";
                 }
                 else
                     {
                         return "#ffffff";
                     }
  
          })
          .transition()
          .ease("bounce")
          .duration(1000)
          .delay(function(d, i) {return i * 500;})
          .text(function(d) { 
              if (eval(d.data.Components) &gt;0)
                 {
                     return ((d.data.Status));
                 }
  
          });
  </code></pre>
  
  <p>I am getting the error when d3.layout.pie() is called. It throws the following error:
  SCRIPT438: Object doesn't support property or method 'map' 
  d3.v3.js, line 4351 character 7</p>
  
  <pre><code>function pie(data) {
        var values = data.map(function(d, i) {
          return +value.call(pie, d, i);
        });
  </code></pre>
  
  <p>Thanks,
  Krishna.V</p>