用tree布局绘制了一个树图,但是在拖动时出现了抖动问题。
老代码:
this.svg.call(
d3.zoom()
.scaleExtent([0.1, 3])
.on('zoom', () => {
this.svg.attr('transform', d3.event.transform);
})
);
google之后找到了问题的原因和解决方案,可参考下面2篇文章:
drag-zoom-smoother
understanding zoom behavior bindings
新代码:
this.g = this.svg.append('g');
this.svg.call(
d3.zoom()
.scaleExtent([0.1, 3])
.on('zoom', () => {
this.g.attr('transform', d3.event.transform);
})
);