我们使用缩放行为来完成此操作。 基本上,我们要做的是等待图形发生变化(.on('transitionEnd')),然后重新调整图形的中心位置,并将缩放级别设置为1。 为此,我们获取图形的SVG元素并读取其viewBox属性,该属性接近图形的大小。 然后,我们获取图的缩放行为(与使用鼠标进行缩放和平移的行为相同),并使用其transform函数。 transform函数可用于设置缩放级别以及平移,即通过传递一个transform对象来平移我们的图形。 d3.zoomIdentity为我们提供了一个新的转换对象scale = 1, x = 0, y = 0,通过调用translate,我们可以指定一个x和y的值来转换。一个4的x-转换和一个对应于viewbox height - 4的y-转换。 这会产生下列程式码(也会使用transition来使缩放转换平滑):
// you can also use 'renderEnd' if you do not use animations
graphVisualization.on('transitionEnd', () => {
// Some zoom examples: https://observablehq.com/@d3/programmatic-zoom
const svg = d3.select('#graph-wrapper svg')
const viewBox = svg.attr('viewBox').split(' ')
// const graphWidth = +viewBox[2]
const graphHeight = +viewBox[3]
const transform = graphVisualization.zoomBehavior()?.transform
// Define scale and translate
// Resetting zoom to 1
// +4 and -4 are used since they seem to be the default d3-graphviz offsets
svg.transition('translateTransition').call(transform, d3.zoomIdentity.translate(4, graphHeight - 4))
})
3条答案
按热度按时间qfe3c7zg1#
没有简单的内置方式,但你可以用属性实现几乎任何东西,如下所示:
第一个
qojgxg4l2#
基于magjac的评论,我跳过了
.fit()
、.scale()
、.width()
和.height()
,并在属性器中完成了所有操作,这使得该解决方案甚至可以用于更大的图。请注意以下几点:
<svg>
的高度和宽度设置为100%
,我们可以跳过.width()
和.height()
,并让<svg>
填充其容器div。scale
变量,可以设置该变量(0-1)来确定图形的比例谢谢magjac给我这个超棒的图书馆!
第一个
pw136qt23#
我们使用缩放行为来完成此操作。
基本上,我们要做的是等待图形发生变化(
.on('transitionEnd')
),然后重新调整图形的中心位置,并将缩放级别设置为1。为此,我们获取图形的SVG元素并读取其
viewBox
属性,该属性接近图形的大小。然后,我们获取图的缩放行为(与使用鼠标进行缩放和平移的行为相同),并使用其
transform
函数。transform
函数可用于设置缩放级别以及平移,即通过传递一个transform对象来平移我们的图形。d3.zoomIdentity
为我们提供了一个新的转换对象scale = 1, x = 0, y = 0
,通过调用translate
,我们可以指定一个x
和y
的值来转换。一个4
的x
-转换和一个对应于viewbox height - 4
的y
-转换。这会产生下列程式码(也会使用
transition
来使缩放转换平滑):