- transition
// 可以给父元素开启过渡效果然后用select找到子元素修改属性时就会产生过渡效果
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可以给第一个参数放一个事件名称
// start(开始) stop(结束) interrupt(打断 -- 在过渡效果执行中 又在其他地方调用了过渡会触发打断事件)
// 如果只传一个参数则与普通的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);
// 比例尺的定义域发生了变化
xScale.rangeRoundBands([width, 0]);
// call执行映射比例尺的行为**也是修改子元素的属性**
// 可以给父元素开启过渡后调用call可以产生过渡效果
g.transition().duration(2000).ease("bounce-out").call(xAxis);
