XSLT创建复杂的SVG可视化,最大限度地减少了线路交叉等

时间:2014-03-27 08:18:29

标签: performance xslt svg visualization

这不是实际的单一编码问题,而是解决复杂问题的正确方法的问题。

所以,我使用xslt为我的XML数据构建了一个相当复杂的svg可视化。它看起来像这样:

example of how my svg visualisation looks http://www.erksst.de/daten/svg%20vis.jpg

这只是整个数据的一小部分样本。有两三行。每行最多可包含160个黄色框。

(黄色方框是字母系列,蓝色/灰色方框是单个字母,线条代表传播方式。)

到目前为止它运作良好,但我想优化它:

(1)最小化线路交叉次数

(2)最小化穿过蓝色/灰色框的线数

(3)尽量减少线路太靠近另一条线路。

要实现这一目标,有些事情会有所不同:

(a)最广泛的行(在样本中是第三行)是固定的。它无法移动。但是其他(两个)可以在最宽行的宽度范围内移动。即在我的例子中,第二行的黄色框可以向右移动约160个像素。

(b)此外,在两个较小的行中,黄色框之间的边距可以变化。在我的例子中,每行只有一个。但当然,在两个较小的行中可能会有多个黄色框。

(c)一行中黄色方框的顺序可以改变。

因此,很多人都有可能实现这种可视化。 问题是表现时间。

我已经通过使用一种预先构建可视化并计算交叉数的函数开始了线交叉问题。 具有最小交叉数的变化实际上建立在输出中。 问题是它需要的时间。只有100个可能性和我的洞XML数据的转换耗时90秒。听起来并不多,但考虑到100种变化只是所有理论上可能的选项的一小部分,并且可视化应该在未来的某个时刻在用户服务器上实时构建。选择90秒的数据简直太过分了。 我已经将计算线交叉功能的可视化模板减少到了所有必要的保留所有标题等等。这确实有所帮助,但没有预期的那么多。

线条绘制如下:首先,绘制所有框,保持其原始数据的id。然后我回到我的数据,查看连接的位置并构建线。

1 个答案:

答案 0 :(得分:1)

您可以通过XSLT将XML转换为DOT语言(普通TXT格式)并通过GraphViz进行处理。

我解决了一些类似的问题(虽然不像你的那么大)。