d3.js - 对象不支持属性或方法'map'

时间:2013-09-30 07:28:43

标签: d3.js

我在IE9中收到此错误。在所有其他浏览器中 - chrome,Firefox,我的图表运行良好。有人可以就如何解决这个错误提出自己的看法吗?

我正在使用d3创建一个饼图。我动态获取路径并附加在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));
               }

        });

调用d3.layout.pie()时收到错误。它会引发以下错误: SCRIPT438:对象不支持属性或方法'map' d3.v3.js,第4351行7字符

function pie(data) {
      var values = data.map(function(d, i) {
        return +value.call(pie, d, i);
      });

谢谢, Krishna.V

2 个答案:

答案 0 :(得分:2)

map是Javascript的新增功能,因此未在所有浏览器中实现。 This page有更多信息,以及不支持它的浏览器的实现。在代码中包含此页面上的代码可以解决问题。

答案 1 :(得分:0)

地图应该在IE9上工作,但我知道D3在IE8及以下版本有问题。也许你需要修改你的功能而不使用&#39; map&#39;或者&#39; foreach&#39; javascript方法。相反,尝试通过jQuery使用相同的函数。

@OneToMany

您有更多信息here