d3.js - conflict of version 3 of d3.min.js with jquery (e.g., jquery.1.10.2.min.js) in some machines -
i followed example @ http://bl.ocks.org/wizicer/f662a0b04425fc0f7489 draw skill sunburst , worked fine in local machine. however, when deployed same code dev machine, gave following error. error went away when removed 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 this might due eval(). can't find anywhere in code:
// 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) { (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 ? : b; else (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 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);
it turned out d3.min.js modified using free ftp server. it's not real problem.
Comments
Post a Comment