d3.js 缩放和居中D3-Graphviz图形

vbopmzt1  于 2022-11-12  发布在  其他
关注(0)|答案(3)|浏览(395)

使用d3-graphviz缩放和居中图形的最佳方法是什么?我希望我可以使用scale(0.5),但这会使生成的图形不居中。
我可能会使用.attributer(),然后手动调整<svg><g>元素,以获得我所需要的内容,但我认为可能有更好的方法?
第一个

qfe3c7zg

qfe3c7zg1#

没有简单的内置方式,但你可以用属性实现几乎任何东西,如下所示:
第一个

qojgxg4l

qojgxg4l2#

基于magjac的评论,我跳过了.fit().scale().width().height(),并在属性器中完成了所有操作,这使得该解决方案甚至可以用于更大的图。
请注意以下几点:

  • 通过将<svg>的高度和宽度设置为100%,我们可以跳过.width().height(),并让<svg>填充其容器div。
  • 引入了一个scale变量,可以设置该变量(0-1)来确定图形的比例
  • 添加了评论,以帮助任何人谁找到他们的方式在这里

谢谢magjac给我这个超棒的图书馆!
第一个

pw136qt2

pw136qt23#

我们使用缩放行为来完成此操作。
基本上,我们要做的是等待图形发生变化(.on('transitionEnd')),然后重新调整图形的中心位置,并将缩放级别设置为1。
为此,我们获取图形的SVG元素并读取其viewBox属性,该属性接近图形的大小。
然后,我们获取图的缩放行为(与使用鼠标进行缩放和平移的行为相同),并使用其transform函数。
transform函数可用于设置缩放级别以及平移,即通过传递一个transform对象来平移我们的图形。
d3.zoomIdentity为我们提供了一个新的转换对象scale = 1, x = 0, y = 0,通过调用translate,我们可以指定一个xy的值来转换。一个4x-转换和一个对应于viewbox height - 4y-转换。
这会产生下列程式码(也会使用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))
    })

相关问题