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