import * as D3 from 'd3'
export default class DThree {
createSvg (result) {
let svg = D3.select(result)
.append('svg')
.attr('width', '300')
.attr('height', '300')
let rect = svg.append('rect')
.attr('width', 100)
.attr('height', 30)
.attr('x', 10)
.attr('y', 10)
.attr('fill', 'steelblue')
let rectTran = rect.transition()
.duration(2000)
.attrTween('width', (d, i, a) => {
return t => {
return Number(a) + t * 300
}
})
console.log(rectTran)
}
createSvgTwo (result) {
let svg = D3.select(result)
.append('svg')
.attr('width', 300)
.attr('height', 300)
let rect = svg
.append('rect')
.attr('width', 100)
.attr('height', 30)
.attr('x', 10)
.attr('y', 10)
.style('fill', 'steelblue')
let rectTran = rect.transition()
.duration(2000)
.style('fill', 'red')
console.log(rectTran)
}
createTextSvg (result) {
D3.select(result).append('svg').remove()
let svg = D3.select(result)
.append('svg')
.attr('width', 500)
.attr('height', 300)
let rect = svg.append('rect')
.attr('width', 100)
.attr('height', 30)
.attr('x', 10)
.attr('y', 10)
.style('fill', 'steelblue')
let rectTran = rect.transition()
.duration(2000)
.attrTween('width', (d, i, a) => {
return t => {
return Number(a) + t * 300
}
})
let text = svg.append('text')
.attr('x', 100)
.attr('y', 10)
.text(100)
.attr('dy', '1.2em')
.style('fill', 'white')
.attr('text-anchor', 'end')
let initx = text.attr('x')
let initText = text.text()
let textTran = text.transition()
.duration(2000)
.tween('text', function () {
return function (t) {
D3.select(this).attr('x', Number(initx) + t * 300).text(Math.floor(Number(initText) + t * 300))
}
})
console.log(textTran)
}
}
D3.js 动画 过度属性
猜你喜欢
转载自blog.csdn.net/weixin_41111068/article/details/83958951
今日推荐
周排行