0
Q
缩放D3裁剪问题
A
回答
0
我终于能够解决这个问题。要点是:
- 使用适当的svg元素进行剪辑,通常
rect
做相应的宽度/高度(与“绘图”区域相同)的作业。 - 转换在剪辑路径(区域)内绘制的所有元素,而不是父组。
在代码(省略不相关部分),其结果是:
// Scales, axis, etc.
...
// Zoom behaviour & event handler
let zoomed = function() {
let e = d3.event;
let tx = Math.min(0, Math.max(e.translate[0], width - width*e.scale));
let ty = Math.min(0, Math.max(e.translate[1], height - height*e.scale));
zoom.translate([tx,ty]);
main.selectAll('.circle').attr('transform', 'translate(' + [tx,ty] + ')scale(' + e.scale + ')');
svg.select('.x.axis').call(xAxis);
svg.select('.y.axis').call(yAxis);
}
let zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1,8])
.on('zoom', zoomed);
const svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.attr('pointer-events', 'all')
.call(zoom);
const g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Set clip region, rect with same width/height as "drawing" area, where we will be able to zoom in
g.append('defs')
.append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', height);
const main = g.append('g')
.attr('class', 'main')
.attr('clip-path', 'url(#clip)');
let circles = main.selectAll('.circle').data(data).enter();
相关问题
- 1. R:裁剪/缩放地图
- 2. SVG viewBox缩放和裁剪
- 3. php缩放图像裁剪
- 4. 缩放,裁剪和剪切视频iPhone
- 5. d3 hexbin缩放问题
- 6. d3数据缩放问题
- 7. iPad裁剪问题
- 8. 通知中的缩放,裁剪图标
- 9. QGraphicsView滚动和图像缩放/裁剪
- 10. 缩放,裁剪和保存照片
- 11. 正确裁剪和缩放UIImage
- 12. 裁剪缩放的图像'Android'
- 13. 缩放div时裁剪的内容
- 14. XML中的缩放和裁剪图像
- 15. 缩放图像以在android中裁剪
- 16. 裁剪UIImage从捏/缩放状态
- 17. C#裁剪,缩放,旋转图像
- 18. 裁剪,缩放和居中位图
- 19. 一个手指图像缩放/裁剪
- 20. XNA Texture2D裁剪问题
- 21. JavaScript图像裁剪问题
- 22. Devexpress PictureEdit裁剪问题
- 23. 问题在裁剪图像
- 24. ios9 - 问题与裁剪CVImageBuffer
- 25. 图像裁剪问题
- 26. 图像裁剪问题
- 27. PHP图像裁剪问题
- 28. 投影和裁剪问题?
- 29. JLayeredPane + JScrollPane裁剪问题
- 30. v4中的d3缩放功能问题