javascript - Graphviz svg 输出，组未定位

Question

Graphviz 给我的输出基本上如下所示:

<svg>
  <g id="graph0" class="graph" transform="scale(0.138865 0.138865) rotate(0) translate(4 4648)">
    <title>G</title>
    ...
    <g id="node36" class="node">
      <title>SomeTitle</title>
      <g id="a_node36">
        <a>
          <ellipse cx="1225" cy="-3546" rx="85.1304" ry="18">
          </ellipse>
          <text x="1225" y="-3541.8">
          sometext</text>
        </a>
      </g>
    </g>
    ...
  </g>
</svg>

我不是 Svg 专家，但似乎由于节点的内容是相对于图形组而不是节点组定位的，因此在节点上进行 scale 将会产生不需要的结果结果。我是否必须遍历图表并“标准化”所有内容？ Graphviz 上有开关可以执行此操作吗？

归一化算法是否采用组元素的 x 和 y 描述的边界框的左上角，并将其用作组的翻译并将成员调整到新的坐标系？

我正在使用 jQuery Svg 以及 D3——它们中的任何一个都有标准化函数来帮助解决这种情况吗？这看起来很痛苦，所以我不得不问为什么这是现实。

Answer 1

由于默认情况下文档的原点位于左上角，因此对节点进行直线缩放也会导致其移动。

然而，除了节点以原点为中心的特定情况之外，这在所有情况下都是如此。纠正这个问题相当简单。 SVG 变换可以通过一系列基本变换操作来构建。

要围绕其中心点缩放元素，您所要做的就是:

1. 将中心点平移到原点:translate(-1225,3546)
2. 规模:规模(4)
3. 将其翻译回原来的位置:translate(1225,-3546)

<svg width="400" height="400">
  <g id="graph0" class="graph" transform="scale(0.138865 0.138865) rotate(0) translate(4 4648)">
    <title>G</title>
    
    <g id="node36" class="node">
      <title>SomeTitle</title>
      <g id="a_node36" transform="translate(1225,-3546) scale(4) translate(-1225,3546)">
        <a>
          <ellipse cx="1225" cy="-3546" rx="85.1304" ry="18" fill="blue">
          </ellipse>
          <text x="1225" y="-3541.8" fill="white">
          sometext</text>
        </a>
      </g>
    </g>

    <g id="node36" class="node">
      <title>SomeTitle</title>
      <g id="a_node36_orig">
        <a>
          <ellipse cx="1225" cy="-3546" rx="85.1304" ry="18" fill="red">
          </ellipse>
          <text x="1225" y="-3541.8" fill="white">
          sometext</text>
        </a>
      </g>
    </g>

  </g>
</svg>

请注意，由于转换的工作方式，操作在 transform 属性中以相反的顺序列出。