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

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

You really need to add more detail, preferably a small sample on jsfiddle that shows the breakage. This will greatly increase the chances that someone can help you. Also do read http://www.catb.org/esr/faqs/smart-questions.html :) — Charl Botha, Sep 30 '13 at 08:11

score 2 · Answer 1 · answered Sep 30 '13 at 11:23

2

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.

answered Sep 30 '13 at 11:23

Lars Kotthoff

107,425
16
204
204

I believe map should be working in IE9 right? Is it mentioned anywhere it does not work? – krishna_v Sep 30 '13 at 13:54
Apparently its support is flaky: http://stackoverflow.com/questions/9273674/array-map-not-working-in-ie9 – Lars Kotthoff Sep 30 '13 at 14:00

score 0 · Answer 2 · answered Feb 12 '16 at 14:46

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.

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

2 Answers2