我按照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);
答案 0 :(得分:0)
事实证明,d3.min.js是使用免费的ftp服务器修改的。所以这不是一个真正的问题。