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 - 其中任何一个都有一个normalize函数，可以帮助在这种情况下？这似乎很痛苦，所以我不得不问为什么这是现实。

Answer 1

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

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

要围绕中心点缩放元素，您需要做的就是：

将中心点转换为原点：name
比例：translate(-1225,3546)
将其翻译回原来的位置：scale(4)

＆＃13;

translate(1225,-3546)

＆＃13;

请注意，由于转换的工作方式，操作在<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>属性中以相反的顺序列出。

Graphviz svg输出，未定位的组

1 个答案: