d3.js - Object doesn't support property or method 'map' - d3.js

Question

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?
I am using d3 to create a piechart. I get the path dynamically and get appended in diDataUrlPrefix.
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< length; i++) {
var d = data[i];
d.Components = +d.Components;
if(d.Components >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) >0)
{
return ((d.data.Status));
}
});
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
function pie(data) {
var values = data.map(function(d, i) {
return +value.call(pie, d, i);
});
Thanks,
Krishna.V

Answer 1

map is a relatively recent addition to Javascript and as such not implemented in all browsers. This page has more information, along with an implementation for the browsers that don't support it. Including the code on this page in your code should solve the problem.

Answer 2

Map should be working on IE9 but I know that D3 has problems with IE8 and below. Maybe you'll need modify your functions for not use 'map' or 'foreach' javascript methods. Instead, try to use the same functions by jQuery.
function pie(data) {
var values = jQuery.map(data, function(d, i) {
return +value.call(pie, d, i);
});
You have more information here.