如何修复集群捆绑图中的缩放和平移
How do I fix zooming and panning in my cluster bundle graph?
我用一些数据创建了一个分层边缘捆绑图,在尝试在图上实现缩放和拖动后,我遇到了一些问题。
这是我到目前为止拥有的类似工作jsfidd:https://jsfiddle.net/hnjvxd48/1/
和相关代码:
var zoom = d3.behavior.zoom()
.scaleExtent([0,8])
.on("zoom", zoomhandler);
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
var svg = d3.select(".container").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")")
.call(zoom)
.call(drag);
function zoomhandler(){
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("dragging", true);
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("dragging", false);
}
您会注意到:
1( 拖动和缩放仅发生在图形的外边缘,而不是图形的内部。
2(拖动图形会导致图形的闪烁和居中发生变化并被切断。
3( 缩放(通过鼠标滚轮完成(也会错误地将图形居中,并将其放置在不可预测的位置,部分超出视口。
4( 在缩小图形后尝试拖动图形会导致其闪烁并消失。
是什么导致了这些问题,我该如何解决这些问题?如何为我的图形(比我提供的示例图形大得多(提供初始"缩小"状态,并可能使用按钮单击事件而不是本机滚轮实现触发缩放功能?
这里要注意的重要一点是拖动函数实际上是多余的。在此 (http://bl.ocks.org/mbostock/6123708( d3 拖动 + 缩放示例中,它们用于移动单个"点"。您希望一次移动整个图形,这由您包含的"缩放处理程序"函数的"翻译"部分处理。
这是一个工作小提琴:https://jsfiddle.net/14f9f4k3/1/
以及注释中注明的更改的关键代码:
var zoom = d3.behavior.zoom()
.scaleExtent([0,8])
.on("zoom", zoomhandler);
//added another group as a child of the group having zoom called on it w/ id 'draggroup' to append nodes and links to
var svg = d3.select(".container").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")")
.call(zoom)
.append('g')
.attr('id','draggroup');
//added a rect behind the other elements to make an easy target for the pointer
d3.select('#draggroup')
.append('rect')
.attr("transform", "translate(" + -radius + "," + -radius + ")")
.attr('width',diameter)
.attr('height',diameter)
.attr('fill','#fff');
//no need for separate drag functions, translate and scale here do what you want
function zoomhandler(){
svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
}
//append the links and nodes to the group we created above instead of the base svg
var link = d3.select('#draggroup').append("g").selectAll(".link"),
node = d3.select('#draggroup').append("g").selectAll(".node");
相关文章:
- 更改高贴图的缩放级别
- 在不阻止默认行为的情况下检测IE10中的缩放
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 缩放Raphael/SVG容器以适应所有内容
- 传单缩放控制位置错误
- 在不移动内部文本的情况下缩放元素的效果
- 调整缩放窗口高度提升缩放
- 计算CSS3缩放框在另一个框中的最高位置
- D3.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 将直流图表库中的折线图缩放限制为小时
- 如何在用户缩放我的网站时修复字体大小(CTRL+'+')
- 如何修复集群捆绑图中的缩放和平移
- 如何修复页面加载时谷歌地图的缩放
- CSS或如何修复浏览器具有不同DPI/缩放设置时的外观
- 使用窗口定向来修复ipad缩放问题
- 无法修复浏览器缩放时滑块移动距离
- 移动浏览器初始缩放问题未被元标签修复
- 修复chrome缩放问题
- 我需要帮助修复这个bug与KineticJS -问题缩放浏览器缩小