D3.js 缩放和中心D3图维兹图

使用d3 graphviz缩放和居中图形的最佳方法是什么？我希望我可以使用scale0.5，但这会使生成的图形不居中

我可能会使用.attributer并手动调整和元素以获得我想要的内容，但我认为可能有更好的方法

d3.选择图 graphviz先生 .300 .身高300 菲特鲁先生 .比例尺.5 .renderDot'digraph{a->b}；

---

没有简单的内置方式，但您几乎可以通过以下方式实现任何目标：

常数px2pt=3/4； 函数属性数据、索引、节点{ var selection=d3。选择此项； 如果datum.tag==svg{ 变量宽度=datum.attributes.width； 变量高度=datum.attributes.height； w=datum.attributes.viewBox.split[2]； h=datum.attributes.viewBox.split[3]； var x=宽度*px2pt-w/2/2； 变量y=高度*px2pt-h/2/2； 选择 .宽度，宽度 .身高，身高 .attrviewBox，-x++-y++宽度*px2pt++高度*px2pt； datum.attributes.width=宽度； datum.attributes.height=高度； datum.attributes.viewBox=-x++-y++宽度*px2pt++高度*px2pt； } } d3.selectgraph.graphviz .300 .身高300 菲特鲁先生 .比例尺.5 .论坛 .renderDot'digraph{a->b}；

---

根据magjac的评论，我跳过了.fit、.scale、.width和.height，并在attributer中完成了所有操作。这使得解决方案甚至可以用于较大的图形

需要注意的几点：

将的高度和宽度设置为100%允许我们跳过.width和.height，并使填充其容器div。 引入了一个可设置为0-1的比例变量，以确定图形的比例 添加了一些评论，以帮助找到他们的方法的人 谢谢magjac提供了这个很棒的图书馆

常数标度=0.8； 函数属性数据、索引、节点{ var selection=d3。选择此项； 如果datum.tag==svg{ datum.attributes={ …datum.attributes， 宽度：“100%”， 高度：“100%”， }; //svg是由hpcc js/wasm构建的，它使用pt而不是px，因此需要进行转换 常数px2pt=3/4； //获取px中的图形尺寸。这些尺寸可以从svg的viewBox中获取 //hpcc js/wasm生成的 const graphWidth=datum.attributes.viewBox.split'[2]/px2pt； const graphHeight=datum.attributes.viewBox.split'[3]/px2pt； //新的视口宽度和高度 常数w=图形宽度/刻度； 常数h=图形高度/刻度； //新建viewBox原点以保持图形居中 常数x=-w-图形宽度/2； 常数y=-h-图形高度/2； const viewBox=`x*px2pt}${y*px2pt}${w*px2pt}${h*px2pt}`； selection.attr'viewBox'，viewBox； datum.attributes.viewBox=视图框； } } d3.selectgraph.graphviz .论坛 .renderDot'digraph{a->b->c->d->e}；

---

一个不幸的副作用是，这会破坏。适合大型图形。例如，您可以简单地将图形扩展为“有向图{a->b->c->d->e}”，我想您必须深入了解SVG视口的细节，并使属性器更加智能。实际上，.fit和.scale以及在某种程度上.width和.height所做的是操纵viewBox属性，这样就可以更容易地跳过它们并在属性器中执行所有操作。