D3.js加载完成后放大特定路径
D3.js zooming on specific path after loading finished
我想在 D3.js 的路径上 触发 一个 事件 .这是一个工作示例:http://jsfiddle.net/kwoxer/kpL1uyy2/
那怎么能说特定路径是由zoomIntoArea函数触发的呢。我的意思是最后我有一些路径,我想在启动时加载一个特定的路径而不点击它。我已经试过了:
zoomIntoArea(d3.select("lines"))
和其他一些,但肯定不会给我返回正确的元素。
您不需要缩放行为来显式缩放到路径,例如:
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [
width / 2 - scale * x,
height / 2 - scale * y];
svg.transition()
.duration(750)
.attr("transform", "translate(" +
translate + ")scale(" +
scale + ")");
我想在 D3.js 的路径上 触发 一个 事件 .这是一个工作示例:http://jsfiddle.net/kwoxer/kpL1uyy2/
那怎么能说特定路径是由zoomIntoArea函数触发的呢。我的意思是最后我有一些路径,我想在启动时加载一个特定的路径而不点击它。我已经试过了:
zoomIntoArea(d3.select("lines"))
和其他一些,但肯定不会给我返回正确的元素。
您不需要缩放行为来显式缩放到路径,例如:
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [
width / 2 - scale * x,
height / 2 - scale * y];
svg.transition()
.duration(750)
.attr("transform", "translate(" +
translate + ")scale(" +
scale + ")");