【发布时间】：2018-10-05 16:39:09
【问题描述】：
link to error message2 天前谷歌浏览器自动更新到版本 66。从那时起，我运行的网站完全停止在谷歌浏览器中工作。但它在 Firefox 和 Edge 中完美运行。所以我开始在google chrome中调试，然后我发现问题出在ajax调用上。所以最初对于主页，许多 ajax 调用会被命中。在该调用列表中，最后一个调用多次执行成功部分。因此，当第二次执行响应的 susscess 时，它会抛出 aw snap，页面无法在 chrome 中显示错误。然后我使用一些标志将成功调用限制为一次，然后主页正在加载。但是在左侧面板中提交后，同样的 ajax 调用会被命中，所以现在我得到了同样的 aw snap 错误。我正在使用 angularjs ajax。所以请帮我解决这个问题。当我调试时，我在控制台中收到以下错误消息 error message in console
正如评论中所讨论的，d3.js 代码的这个功能会导致应用程序崩溃。所以当我评论这个时，除了这个图表，所有其他的东西都在工作
var carbon = new Charts();
var chart = d3.select(this.selector);
var width = carbon.pixToVal(chart.style("width"));
var height = carbon.pixToVal(chart.style("height"));
/*var width=475;
var height=133;*/
/*var maxVal =100;*/
var maxVal =d3.max(jsonData,function(d){return d.current;})+ 15;
var length1=jsonData.length;
var newWidthParts=newWidth/10;
/*console.log(length1);
console.log(newWidth);*/
var newHeightParts=height/10;
var conatinerRectHt=newHeightParts*6.5;
/*var boxHeight=(newHeightParts*9-newHeightParts*2.5)/5;*/
var margin={
top: 15, left:15,right:15,bottom:20
}
var availableWidth = width - margin.left - margin. right;
var newWidth= availableWidth/length1;
var availableHeight = height - margin.top - margin.bottom;
var HeightForTopLabel =15;
var HeightForBottomLabel = 15;
var HeightOfAbsValue = 15;
var HeightForMidLabel = 15;
var OuterRectHeight= availableHeight - (HeightForBottomLabel) - HeightForTopLabel; /*- HeightOfAbsValue;*/
/* var BottomTextYPosition = margin.top + HeightForTopLabel + OuterRectHeight + HeightForBottomLabel ;
*/
var outerRectBottomYPosition = margin.top + HeightForTopLabel +OuterRectHeight;
//outerRectTopYPosition + OuterRectHeight
var outerRectTopYPosition = margin.top + HeightForTopLabel;
var BottomTextYPosition = height - margin.bottom;
var outerRectWidth = 50;
var innerRectWidth =8;
var outerRectDistFromLeft = newWidth/2 - outerRectWidth/2 + margin.left ;
var innerRectDistFromLeft = newWidth/2 - innerRectWidth/2 + margin.left ;
var creatSvg = chart.append("div").attr("class", "chartBox9")
.style("position", "absolute")
.style("height", "100%")
.style("width", "100%")
.append("svg").attr('id','defsGrad')
.attr("width", width)
.attr("height", height);
d3.select("#defsGrad")
.append("text").attr("x",availableWidth - 1.8*(margin.left + margin.right) )
.attr("y",height-5)
.attr("id","shareContritext")
.text("% Room Revenue")
.attr("font-size",10.5);
d3.select("#defsGrad").append("defs").append("linearGradient").attr('id','grad1')
.attr({'x1':'0%','y1':'100%','x2':'0%' ,'y2':'0%'}).append('stop')
.attr('offset',"0%").style({'stop-color':'rgb(215,214,214)','stop-opacity':'0.7'});
d3.select('#grad1').append('stop')
.attr('offset',"100%").style({'stop-color':'rgb(249,249,249)','stop-opacity':'0.9'});
svgContainer=creatSvg.selectAll('g')
.data(jsonData).enter()
.append("g")
.attr("transform",function(d,i){
var res = "translate(";
var val = i*newWidth;
return res+val+" 0)";
});
svgContainer.append("text")
.attr("y", margin.top)
.attr("font-size",fontsize)
.text(function(d) {
if( d.current == null){
d3.select(this).attr("x",outerRectDistFromLeft + outerRectWidth/5 + 5);
return "N/A";
}else
{
var xposition = outerRectDistFromLeft + (outerRectWidth/5+4);
var nbr = d.current;
// var decimals = (nbr!=Math.floor(nbr))?(nbr.toString()).split('.')[0].length:0;
var decimals;
if(nbr % 1 !== 0)
{
decimals = (nbr!=Math.floor(nbr))?(nbr.toString()).split('.')[0].length:0;
}else
{
decimals = nbr.toString().length;
}
d3.select(this).attr("x",xposition-(decimals-1)*4);
if(d.change==null)
{
d3.select(this).attr("x",outerRectDistFromLeft + outerRectWidth/5 + 5);
}
return d.current_prefix + d.current.toFixed(1) + d.current_suffix;}
});
var rectangle1 = svgContainer.append("rect")
.attr("class","outerRect9")
.attr("x", outerRectDistFromLeft)
.attr("y",outerRectTopYPosition)
.attr("width", outerRectWidth)
.attr("height", OuterRectHeight)
.attr("fill", "url(#grad1)");
svgContainer.append("text")
.attr("y", margin.top + HeightForTopLabel -2 )
.attr("fill",
function(d){
var colorChange="";
if(d.change>=0.0)
colorChange="#06C10C";
else
colorChange="#F7063A";
return colorChange;
}
)
.attr("font-size",fontsize)
.text(function(d) {
if( d.change == null){
d3.select(this).attr("fill","black");
d3.select(this).attr("x",outerRectDistFromLeft + outerRectWidth/5 + 7);
return "N/A";
}else{
var pre ="";
if(d.change>=0.0)
pre="+";
/*if(d.current!=null)
{
d3.select(this).attr("x", outerRectDistFromLeft + outerRectWidth/5+3 );
}*/
var xposition = outerRectDistFromLeft + outerRectWidth/5;
/* if(d.current =! null){
d3.select(this).attr("x", xposition);
}
else
{
d3.select(this).attr("x", xposition);
}*/
d3.select(this).attr("x", xposition);
return pre+d.change.toFixed(1)/*+d.change_suffix*/;}
});
var rectangle0=svgContainer.append('rect') .attr("x", innerRectDistFromLeft)
.attr("y",outerRectTopYPosition).attr('width',8).attr('height',OuterRectHeight)
.attr('fill','#BDBDB7').attr('opacity',0.5);
var rectangle2=svgContainer.append('rect') .attr("x", innerRectDistFromLeft)
.attr("y", function(d) {
if(d.current == null){return (margin.top + HeightForTopLabel +OuterRectHeight);}
else{ return (margin.top + HeightForTopLabel +OuterRectHeight) - ((d.current/maxVal)*OuterRectHeight);}
}).attr('width',8).attr('height',function(d) {
if(d.current == null){
return 0;
}
else{ return ((d.current/maxVal)*OuterRectHeight);}
}).attr('fill',function(d,i){return d.color_code;});
var data1 = d3.range(5)
var c = d3.scale.ordinal()
.domain(data1)
.rangeBands([outerRectBottomYPosition + 1.5 ,outerRectTopYPosition ])
var innerRect= svgContainer.selectAll('.inners')
.data(data1)
.enter()
.append('rect').attr('class','inners')
.attr('y',function(d) { return (c(d));/*return Math.round(c(d))*/ })
.attr('x',innerRectDistFromLeft )
.attr('width',8)
.attr('height',(OuterRectHeight/5) )/*+ (1.5*3)*/
.style('stroke','#F6F6F6')
.style('stroke-width','1.2')
.style('fill', "none");
svgContainer.append("text")
.attr("x",function(d,i){
var name =d.name;
var lengthOfText = name.length;
if(lengthOfText > 2){
return outerRectDistFromLeft + outerRectWidth/3 - lengthOfText*2;
}
else {
return outerRectDistFromLeft + outerRectWidth/3;
}
} )
.attr("y", BottomTextYPosition)
.attr("font-size",fontsize)
.text(function(d) {
return d.name;
})
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
function handleMouseOver(d, i) {
creatSvg.append("rect").attr({
id: "tooltipvaluebox",
y: BottomTextYPosition,
height: 20,
fill:"#CACACE",
})
.attr("x",function(){
var len = (d.fullName.length*10)+20;
var val = newWidth*i;
if((val+len)>width){
var diff = (val+len) - width;
val = val - (diff+5);
}
return val+8;
} )
.attr("width",function(){
var len = d.fullName.length;
return (len*10)+20;
});
creatSvg.append("text").attr({
id: "tooltipvalue",
y: BottomTextYPosition+15
})
.attr("x",function(){
var len = (d.fullName.length*10)+20;
var val = newWidth*i;
if((val+len)>width){
var diff = (val+len) - width;
val = val - (diff+5);
}
return val+8;
} )
.text(function() {
return d.fullName ;
})
.attr('fill','black')
.style("font-family", "roboto");
};
function handleMouseOut(d, i) {
d3.select("#tooltipvaluebox").remove();
d3.select("#tooltipvalue").remove();
};
【问题讨论】：
-
能否分享一下错误消息？
-
我已经编辑了我的帖子并添加了我的错误消息的链接
-
@anjaliarasu 你应该检查浏览器控制台是否有错误（
F12键或Ctrl + Shift + J） -
是的，我检查过了。但是在第二个 ajax 请求之后，浏览器与应用程序断开连接。控制台没有错误
-
但是当我调试时，有时我会收到一条错误消息，我现在将其添加到帖子中
标签： angularjs ajax google-chrome d3.js