某些机器中d3.min.js的第3版与jquery(例如,jquery.1.10.2.min.js)发生冲突

时间:2015-03-28 12:36:52

标签: jquery d3.js

我按照http://bl.ocks.org/wizicer/f662a0b04425fc0f7489的示例来绘制一个技能旭日,它在我的本地机器上运行良好。但是,当我将相同的代码部署到开发机器时,它给出了以下错误。当我删除d3.js时,错误就消失了。

Uncaught SyntaxError: Unexpected token !
jquery-1.10.2.min.js:4 (anonymous function)
jquery-1.10.2.min.js:4 x.extend.globalEval
jquery-1.10.2.min.js:6 x.ajaxSetup.converters.text script
jquery-1.10.2.min.js:6 Onjquery-1.10.2.min.js:6 k
jquery-1.10.2.min.js:6 x.ajaxTransport.send.r
jquery-1.10.2.min.js:6 x.ajaxTransport.send
jquery-1.10.2.min.js:6 x.extend.ajax
jquery-1.10.2.min.js:6 x.extend._evalUrl
jquery-1.10.2.min.js:5 x.fn.extend.domManip
jquery-1.10.2.min.js:5 x.fn.extend.append
jquery-1.10.2.min.js:5 (anonymous function)
jquery-1.10.2.min.js:4 x.extend.access
jquery-1.10.2.min.js:5 x.fn.extend.html
jquery-1.10.2.min.js:6 (anonymous function)
jquery-1.10.2.min.js:4 x.Callbacks.c
jquery-1.10.2.min.js:4 x.Callbacks.p.fireWith
jquery-1.10.2.min.js:6 k
jquery-1.10.2.min.js:6 x.ajaxTransport.send.r

这可能是由于某些eval()造成的。我在代码中找不到任何地方:

// ref: http://bl.ocks.org/wizicer/f662a0b04425fc0f7489
function mouseover(data) {
    var c = getcrumbpath(data);

    sunburst
        .selectAll("path")
        .style("opacity", .4);

    sunburst
        .selectAll("path")
        .filter(function (a) { return c.indexOf(a) >= 0 })
        .style("opacity", 1);
}
function mouseleave() {
    sunburst
        .selectAll("path")
        .style("opacity", 1);

}
function getcrumbpath(a) {
    for (var temp = [], c = a; c.parent;) temp.unshift(c), c = c.parent;
    return temp
}

function getcolor(color) {
    return .299 * color.r + .587 * color.g + .114 * color.b
}
function k(a) {
    var c = ["#E44146", "#A8B529", "#E9666B", "#FBA047", "#00B0D9", "#E76F33", "#57B7DD", "#74B84B"],
        d = [-.1, -.05, 0];
    if (a.depth == 0) { // center circle
        return "#FFFFFF";
    }
    else if (a.depth == 1) { // first layer
        var e = c[coloralternative % 8];
        return coloralternative++, e
    }
    else if (a.depth > 1) { // second layer
        var f = d[a.value % 3];
        return d3.rgb(a.parent._color).brighter(.2 * a.depth + f * a.depth)
    }
}

//https://gist.github.com/biovisualize/1016860#file-index-html
var tooltip = d3.select("#skills")
    .append("div")
    .style("background-color", "white")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

var width = 800,
    height = 800,
    rad = 0.5*Math.min(width, height) / Math.PI - 25,
    q = k,

    sunburst = d3
        .select(".skills-sunburst")
        .append("svg:svg")
        .attr("width", width)
        .attr("height", height)
        .append("svg:g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var t = function (a, b) {
        var c = [],
            d = a.length;
        if (a.length !== b.length) c = a.length > b.length ? a : b;
        else for (var e = 0; d > e; e++) {
            var f = Math.max(a[e], b[e]) - Math.abs(a[e] - b[e]) / 8;
            c.push(f)
        }
        return c
    },

    u = function (a) {
        if (a instanceof Array) return a;
        var b = [];
        return $.each(a, function (a, c) {
            b = t(u(c), b)
        }), b
    },

    proficiencydata = d3
        .layout
        .partition()
        .sort(null)
        .size([2 * Math.PI, rad])
        .children(function (a) {
            return a.value instanceof Array
                ? (a._proficiency = a.value, d3.entries([a.value[a.value.length - 1]]))
                : (a._proficiency = u(a.value), isNaN(a.value) ? d3.entries(a.value) : null)
        })
        .value(function (a) { return a.value }),

    arc = d3.svg
        .arc()
        .startAngle(function (a) { return a.x })
        .endAngle(function (a) { return a.x + a.dx - .01 / (a.depth + .5) })
        .innerRadius(function (a) {
            if(a.depth == 0) {
                return 0;
            }
            else if(a.depth == 1) {
                return rad / Math.PI;
            }
            else if(a.depth == 2) {
                return 4*rad / Math.PI;
            }
        })
        .outerRadius(function (a) {
            //console.log("depth: " + a.depth + " value: " + a.value);
            // depth: 0 means center circle, 1 means 1st layer, etc
            // value: number of children in the 2nd layer
            if(a.depth == 0) {
                return rad / Math.PI - 1;
            }
            else if(a.depth == 1) {
                return 4*rad / Math.PI - 1;
            }
            else if(a.depth == 2) {
                return 12*rad / Math.PI - 1;
            }
        });

var coloralternative = 0

var path = sunburst
    .data(d3.entries(skillsdata))
    .selectAll("g")
    .data(proficiencydata)
    .enter()
    .append("svg:g")
    //.attr("display", function (a) { return a.depth ? null : "none" });
    .attr("display", null);

path
    .append("svg:path")
    .attr("d", arc)
    .attr("stroke", "#fff")
    .attr("fill", function (a) { return a._color = q(a), a._color })
    .attr("fill-rule", "evenodd")
    .attr("display", function (a) { return a.children ? null : "none" })
    .on("mouseover", mouseover);

path
    .append("svg:text")
    .attr("transform", function (a) {
        if(a.depth == 0) {
            return "rotate(0)"
        }
        else if(a.depth == 1) {
            var r = 180 * ((a.x + a.dx / 2 - Math.PI / 2) / Math.PI);
            if(r > 90) r -= 180;
            return "rotate(" + r + ")"
        }
        else if(a.depth == 2) {
            var r = 180 * ((a.x + a.dx / 2 - Math.PI / 2) / Math.PI);
            if(r > 90) r -= 180;
            return "rotate(" + r + ")"
        }
    })
    .attr("x", function (a) {
        if(a.depth == 0) {
            return - rad / Math.PI;
        }
        else if(a.depth == 1) {
            var r = 180 * ((a.x + a.dx / 2 - Math.PI / 2) / Math.PI);
            if(r > 90) {
                return -4*rad / Math.PI;
            }
            else {
                return rad / Math.PI;
            }
        }
        else if(a.depth == 2) {
            var textwidth = 35;

            var adjustX;
            if(a.key.length > textwidth) {
                adjustX = 0;
            }
            else {
                adjustX = (1 - 0.9 * a.key.length / textwidth) * (12*rad - 4*rad);
            }

            var r = 180 * ((a.x + a.dx / 2 - Math.PI / 2) / Math.PI);
            if(r > 90) {
                return -12*rad / Math.PI;
            }
            else {
                return (4*rad + adjustX) / Math.PI;
            }
        }
    })
    .attr("dx", "6")
    .attr("dy", ".1em")
    .text(function (a) {
        var text,textwidth;
        if(a.depth == 0) {
            textwidth = 7;
            text = a.key;
            if(text.length > textwidth) {
                text = text.substr(0, textwidth-3) + '...';
            }
        }
        else if(a.depth == 1) {
            textwidth = 15;
            text = a.key;
            if(text.length > textwidth) {
                text = text.substr(0, textwidth-3) + '...';
            }
        }
        else if(a.depth == 2) {
            textwidth = 40;
            text = a.key;
            if(text.length > textwidth) {
                text = text.substr(0, textwidth-3) + '...';
            }
        }

        return text;
    })
    .attr("display", function (a) { return a.children ? null : "none" })
    //.on("mouseover", mouseover);
    .on("mouseover", function(a){
        if(a.depth == 0 || a.depth == 1) {
            $(this).css('cursor', 'pointer');
        }

        tooltip.text(a.key);

        return tooltip.style("visibility", "visible");
    })
    .on("mousemove", function(a){
        tooltip.text(a.key);

        var top = 0, left = 0;
        if($("#dialogDiv2").length) {
          var position = $("#dialogDiv2").offset();
          top = position.top;
          left = position.left;
        }

        return tooltip.style("top", (event.screenY+window.pageYOffset-top-10)+"px").style("left",(event.screenX+window.pageXOffset-left+10)+"px");
    })
    .on("mouseout", function(a){return tooltip.style("visibility", "hidden");})
    .on("click", function(a){
        if(a.depth == 0 || a.depth == 1) {
            window.location.href='http://google.com';
        }
    })
    ;

d3
    .select(".skills-sunburst")
    .on("mouseleave", mouseleave);

1 个答案:

答案 0 :(得分:0)

事实证明,d3.min.js是使用免费的ftp服务器修改的。所以这不是一个真正的问题。