如何在D3.js中运行一个又一个函数
How can I run a function after another is done in D3.js?
我正在使用d3.js绘制几个条形图。绘制完成后,我想更改所选条形图的颜色,但总是失败。似乎同时调用了drawBars()
和updateColor()
。
function redraw(data){
drawBars(data);
updateColor();
}
如何确保在调用updateColor()
之前完成drawBars()
?
起初,我在drawBar的末尾添加了更新功能代码,但它不起作用。后来,我把它移到了重绘函数的末尾,它也不起作用。这是特定的代码:
function drawBar(drawData){
var w = 1060,h = 600;
d3.selectAll("svg").remove();
var svg = d3.select("#chart").append("svg").attr("width",w).attr("height",h);
uni.forEach(function(element,index,array){
$('.uni').css("top",function(index){
return (index + 1) * 18 + 28;
});
});
$(".rankingheader").css("display","block");
$("#switch input").prop("checked", false);
starData = drawData;
revCountData = drawData;
sentData = drawData;
bizCountData = drawData;
drawAxis(drawData);
drawStar(starData);
drawRev(revCountData);
drawSent(sentData);
drawBiz(bizCountData);
drawLineA(starData);
drawLineB(starData,revCountData);
drawLineC(revCountData,sentData);
drawLineD(sentData,bizCountData);
// cart is a list which stored the id selected by user
if(cart.length > 0){
cart.forEach(function(element,index,array){
d3.select("#starHoverLine" + element).attr("visibility","visible");
d3.select("#starHintText" + element).attr("visibility","visible");
d3.select("#revHoverLine" + element).attr("visibility","visible");
d3.select("#revHintText" + element).attr("visibility","visible");
d3.select("#sentHoverLine" + element).attr("visibility","visible");
d3.select("#sentHintText" + element).attr("visibility","visible");
d3.select("#bizHoverLine" + element).attr("visibility","visible");
d3.select("#bizHintText" + element).attr("visibility","visible");
d3.select("#lineA" + element).style("stroke","red");
d3.select("#lineB" + element).style("stroke","red");
d3.select("#lineC" + element).style("stroke","red");
d3.select("#lineD" + element).style("stroke","red");
d3.select("#starBar" + element).attr("fill","red");
d3.select("#revBar" + element).attr("fill","red");
d3.select("#sentBar" + element).attr("fill","red");
d3.select("#bizBar" + element).attr("fill","red");
});
}
}
您的两个函数不是同时调用的;他们一个接一个地被叫。如果它们似乎同时被调用,则会发生以下两种情况之一:
-
drawBars
是启动异步完成的东西(如ajax请求或动画),或 -
drawBars
正在进行浏览器不会立即显示的更改,您希望在调用updateColor
之前短暂地返回浏览器以允许其显示(呈现)这些更改。
如果它是#1,那么您需要查看drawBars
开始的异步操作的文档,以了解如何知道它何时完成。通常这是一个回调或承诺。根据它是什么,您需要将updateColors
作为参数传递到drawBars
中(这样您就可以从异步回调中调用它),或者让drawBars
返回promise并使用promise的then
方法将updateColors
添加到promise实现时要调用的函数队列中。
如果是#2,那就简单多了:
setTimeout(updateColors, 100); // Wait 100ms (1/10th second) and call `updateColors`
相关文章:
- jQuery使一个又一个充满活力
- RaphaelJS:如何制作一个又一个元素的动画
- 如何运行一个又一个脚本
- 使用 jQuery animate 时绘制一个又一个对象的线条
- 为什么当我调用一个又一个函数时,它调用的都是以前的
- 在 JavaScript 中延迟一个又一个函数的最佳方法
- 在 Ajax 加载的外部 html 中调用一个又一个脚本的事件
- JavaScript:一个又一个循环不执行
- 如何在Javascript中以过程化的方式运行一个又一个语句
- $('html').单击一个又一个单击事件
- WebGL-呈现一个又一个形状时出现问题
- 如何化解一个又一个的承诺
- 如何使用
- JavaScript Regex(替换),如果缺少一个又一个单词
- 用buzz.js播放一个又一个声音
- 从URL运行一个又一个函数
- 如何启动一个又一个脚本
- 玩一个又一个精灵表
- 如何在D3.js中运行一个又一个函数
- PhantomJS打开一个又一个页面