- transition
// 可以給父元素開啟過渡效果然后用select找到子元素修改屬性時就會產(chǎn)生過渡效果
g.transition().duration(2000).ease("bounce-out").select(".rect-1").attr("width",500);
// 也可以直接給修改屬性的元素開啟過渡效果
d3.select(".rect-1").transition().duration(2000).ease("bounce-out").attr("width",500);
// 開啟過渡后所有子元素都會享有過渡動畫
g.transition().duration(2000).ease("bounce-out").selectAll("[class^=rect]").attr("width",500);
- each()
// 開啟過渡效果后會返回一個過渡對象該對象有一個增強版的each可以給第一個參數(shù)放一個事件名稱
// start(開始) stop(結(jié)束) interrupt(打斷 -- 在過渡效果執(zhí)行中 又在其他地方調(diào)用了過渡會觸發(fā)打斷事件)
// 如果只傳一個參數(shù)則與普通的d3.each一樣使用
g.transition().duration(2000).ease("bounce-out").each("interrupt", function () {
console.log("interrupt");
}).select(".rect-1").attr("width", 500);
setTimeout(function () {
g.transition().duration(2000).ease("bounce-out").selectAll("[class^=rect]").attr("width", 500);
}, 1000);
- call()
const xScale = d3.scale.ordinal().domain(d3.range(dataSet.length)).rangeRoundBands([0, width], .5);
const xAxis = d3.svg.axis().scale(xScale).orient("bottom");
const g = svg.append("g").attr("class", "axis").attr("transform", "translate(20,300)").call(xAxis);
// 比例尺的定義域發(fā)生了變化
xScale.rangeRoundBands([width, 0]);
// call執(zhí)行映射比例尺的行為**也是修改子元素的屬性**
// 可以給父元素開啟過渡后調(diào)用call可以產(chǎn)生過渡效果
g.transition().duration(2000).ease("bounce-out").call(xAxis);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
