JUNG - 大图可视化
JUNG - Large graph visualization
我目前正在开发一种使用图形可视化宏基因组数据的工具,因此 Java JUNG 图形可视化库。
当显示大约 1000 个节点时,我遇到了延迟,无论是通过移动相机还是拖动一些节点。
有什么技巧可以改善这种情况吗?
我阅读了一些关于将 window 分成块的内容,并且只使用正在显示的面板块,但我无法理解这一点。
谢谢。
这个问题可能被认为太宽泛了,因为优化的自由度实在是太多了。如果不是重复的话,有些问题至少是相关的(Improve the rendering of a JUNG graph , JUNG cannot display large graphs? 或其他)。
不过,我会尽量在这里回答:
一般来说,使用 JUNG,您可以创建一个漂亮的图形,具有令人印象深刻的默认功能(交互)和许多功能,只需几行代码即可轻松完成。在这方面,JUNG 的主要目标并不是绘制具有 1000 个顶点的图形。相反,它旨在绘制具有数十个(或可能只有 100 个)顶点和边的图 nicely.
(事实上,从理论和信息可视化的角度来看,绘制具有 >1000 个顶点的图几乎毫无意义。您将无法视觉 提取任何来自此类图表的信息 - 至少,不是没有过度缩放和平移)
当你想渲染一个有很多顶点和很多边的图形时,有一些选项可以提高性能。 (你没有说边的数量。在很多情况下,这些是最昂贵的东西!)。
根据我的经验,提高渲染性能最重要的事情是......
禁用抗锯齿!
说真的,这真的很贵。在 JUNG 中,这可以通过
visualizationViewer.getRenderingHints().remove(
RenderingHints.KEY_ANTIALIASING)
除此之外,还有许多选项可以提高性能,但当然,它们都取决于您要牺牲哪个视觉功能。下面的示例显示了一个包含 2500 个顶点和 5000 条边的图。默认情况下,它非常慢。 improvePerformance
方法包含几个关于如何使可视化更快的选项。即使只禁用抗锯齿,性能在我的(相当慢的)机器上也是可以接受的。
Edited/extended回复评论:
import java.awt.Dimension;
import java.awt.RenderingHints;
import java.awt.Stroke;
import java.awt.geom.Point2D;
import java.util.Random;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
import org.apache.commons.collections15.Predicate;
import edu.uci.ics.jung.algorithms.layout.FRLayout;
import edu.uci.ics.jung.algorithms.layout.Layout;
import edu.uci.ics.jung.graph.DirectedSparseGraph;
import edu.uci.ics.jung.graph.Graph;
import edu.uci.ics.jung.graph.util.Context;
import edu.uci.ics.jung.graph.util.Pair;
import edu.uci.ics.jung.visualization.Layer;
import edu.uci.ics.jung.visualization.RenderContext;
import edu.uci.ics.jung.visualization.VisualizationViewer;
import edu.uci.ics.jung.visualization.control.DefaultModalGraphMouse;
import edu.uci.ics.jung.visualization.decorators.EdgeShape;
import edu.uci.ics.jung.visualization.renderers.BasicEdgeRenderer;
import edu.uci.ics.jung.visualization.transform.shape.GraphicsDecorator;
public class JungPerformance
{
public static void main(String[] args)
{
SwingUtilities.invokeLater(new Runnable()
{
@Override
public void run()
{
createAndShowGUI();
}
});
}
private static void createAndShowGUI()
{
JFrame f = new JFrame();
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Graph<String, String> g = createGraph();
Dimension size = new Dimension(800,800);
VisualizationViewer<String, String> vv =
new VisualizationViewer<String, String>(
new FRLayout<String, String>(g, size));
DefaultModalGraphMouse<String, Double> graphMouse =
new DefaultModalGraphMouse<String, Double>();
vv.setGraphMouse(graphMouse);
improvePerformance(vv);
f.getContentPane().add(vv);
f.setSize(size);
f.setLocationRelativeTo(null);
f.setVisible(true);
}
// This method summarizes several options for improving the painting
// performance. Enable or disable them depending on which visual features
// you want to sacrifice for the higher performance.
private static <V, E> void improvePerformance(
VisualizationViewer<V, E> vv)
{
// Probably the most important step for the pure rendering performance:
// Disable anti-aliasing
vv.getRenderingHints().remove(RenderingHints.KEY_ANTIALIASING);
// Skip vertices that are not inside the visible area.
doNotPaintInvisibleVertices(vv);
// May be helpful for performance in general, but not appropriate
// when there are multiple edges between a pair of nodes: Draw
// the edges not as curves, but as straight lines:
vv.getRenderContext().setEdgeShapeTransformer(new EdgeShape.Line<V,E>());
// May be helpful for painting performance: Omit the arrow heads
// of directed edges
Predicate<Context<Graph<V, E>, E>> edgeArrowPredicate =
new Predicate<Context<Graph<V,E>,E>>()
{
@Override
public boolean evaluate(Context<Graph<V, E>, E> arg0)
{
return false;
}
};
vv.getRenderContext().setEdgeArrowPredicate(edgeArrowPredicate);
}
// Skip all vertices that are not in the visible area.
// NOTE: See notes at the end of this method!
private static <V, E> void doNotPaintInvisibleVertices(
VisualizationViewer<V, E> vv)
{
Predicate<Context<Graph<V, E>, V>> vertexIncludePredicate =
new Predicate<Context<Graph<V,E>,V>>()
{
Dimension size = new Dimension();
@Override
public boolean evaluate(Context<Graph<V, E>, V> c)
{
vv.getSize(size);
Point2D point = vv.getGraphLayout().transform(c.element);
Point2D transformed =
vv.getRenderContext().getMultiLayerTransformer()
.transform(point);
if (transformed.getX() < 0 || transformed.getX() > size.width)
{
return false;
}
if (transformed.getY() < 0 || transformed.getY() > size.height)
{
return false;
}
return true;
}
};
vv.getRenderContext().setVertexIncludePredicate(vertexIncludePredicate);
// NOTE: By default, edges will NOT be included in the visualization
// when ONE of their vertices is NOT included in the visualization.
// This may look a bit odd when zooming and panning over the graph.
// Calling the following method will cause the edges to be skipped
// ONLY when BOTH their vertices are NOT included in the visualization,
// which may look nicer and more intuitive
doPaintEdgesAtLeastOneVertexIsVisible(vv);
}
// See note at end of "doNotPaintInvisibleVertices"
private static <V, E> void doPaintEdgesAtLeastOneVertexIsVisible(
VisualizationViewer<V, E> vv)
{
vv.getRenderer().setEdgeRenderer(new BasicEdgeRenderer<V, E>()
{
@Override
public void paintEdge(RenderContext<V,E> rc, Layout<V, E> layout, E e)
{
GraphicsDecorator g2d = rc.getGraphicsContext();
Graph<V,E> graph = layout.getGraph();
if (!rc.getEdgeIncludePredicate().evaluate(
Context.<Graph<V,E>,E>getInstance(graph,e)))
return;
Pair<V> endpoints = graph.getEndpoints(e);
V v1 = endpoints.getFirst();
V v2 = endpoints.getSecond();
if (!rc.getVertexIncludePredicate().evaluate(
Context.<Graph<V,E>,V>getInstance(graph,v1)) &&
!rc.getVertexIncludePredicate().evaluate(
Context.<Graph<V,E>,V>getInstance(graph,v2)))
return;
Stroke new_stroke = rc.getEdgeStrokeTransformer().transform(e);
Stroke old_stroke = g2d.getStroke();
if (new_stroke != null)
g2d.setStroke(new_stroke);
drawSimpleEdge(rc, layout, e);
// restore paint and stroke
if (new_stroke != null)
g2d.setStroke(old_stroke);
}
});
}
public static Graph<String, String> createGraph()
{
Random random = new Random(0);
int numVertices = 2500;
int numEdges = 5000;
Graph<String, String> g = new DirectedSparseGraph<String, String>();
for (int i=0; i<numVertices; i++)
{
g.addVertex("v"+i);
}
for (int i=0; i<numEdges; i++)
{
int v0 = random.nextInt(numVertices);
int v1 = random.nextInt(numVertices);
g.addEdge("e"+i, "v"+v0, "v"+v1);
}
return g;
}
}
@Marco13 的回答很好。我将补充(作为 JUNG 的作者之一)JUNG 目前在可视化缩放方面的主要缺陷是缺乏良好的空间数据结构。因此,力导向布局和较大图形的交互式可视化都可能非常慢。
在某些时候我们会着手解决这个问题(欢迎补丁 :))。
我目前正在开发一种使用图形可视化宏基因组数据的工具,因此 Java JUNG 图形可视化库。
当显示大约 1000 个节点时,我遇到了延迟,无论是通过移动相机还是拖动一些节点。
有什么技巧可以改善这种情况吗? 我阅读了一些关于将 window 分成块的内容,并且只使用正在显示的面板块,但我无法理解这一点。
谢谢。
这个问题可能被认为太宽泛了,因为优化的自由度实在是太多了。如果不是重复的话,有些问题至少是相关的(Improve the rendering of a JUNG graph , JUNG cannot display large graphs? 或其他)。
不过,我会尽量在这里回答:
一般来说,使用 JUNG,您可以创建一个漂亮的图形,具有令人印象深刻的默认功能(交互)和许多功能,只需几行代码即可轻松完成。在这方面,JUNG 的主要目标并不是绘制具有 1000 个顶点的图形。相反,它旨在绘制具有数十个(或可能只有 100 个)顶点和边的图 nicely.
(事实上,从理论和信息可视化的角度来看,绘制具有 >1000 个顶点的图几乎毫无意义。您将无法视觉 提取任何来自此类图表的信息 - 至少,不是没有过度缩放和平移)
当你想渲染一个有很多顶点和很多边的图形时,有一些选项可以提高性能。 (你没有说边的数量。在很多情况下,这些是最昂贵的东西!)。
根据我的经验,提高渲染性能最重要的事情是......
禁用抗锯齿!
说真的,这真的很贵。在 JUNG 中,这可以通过
visualizationViewer.getRenderingHints().remove(
RenderingHints.KEY_ANTIALIASING)
除此之外,还有许多选项可以提高性能,但当然,它们都取决于您要牺牲哪个视觉功能。下面的示例显示了一个包含 2500 个顶点和 5000 条边的图。默认情况下,它非常慢。 improvePerformance
方法包含几个关于如何使可视化更快的选项。即使只禁用抗锯齿,性能在我的(相当慢的)机器上也是可以接受的。
Edited/extended回复评论:
import java.awt.Dimension;
import java.awt.RenderingHints;
import java.awt.Stroke;
import java.awt.geom.Point2D;
import java.util.Random;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
import org.apache.commons.collections15.Predicate;
import edu.uci.ics.jung.algorithms.layout.FRLayout;
import edu.uci.ics.jung.algorithms.layout.Layout;
import edu.uci.ics.jung.graph.DirectedSparseGraph;
import edu.uci.ics.jung.graph.Graph;
import edu.uci.ics.jung.graph.util.Context;
import edu.uci.ics.jung.graph.util.Pair;
import edu.uci.ics.jung.visualization.Layer;
import edu.uci.ics.jung.visualization.RenderContext;
import edu.uci.ics.jung.visualization.VisualizationViewer;
import edu.uci.ics.jung.visualization.control.DefaultModalGraphMouse;
import edu.uci.ics.jung.visualization.decorators.EdgeShape;
import edu.uci.ics.jung.visualization.renderers.BasicEdgeRenderer;
import edu.uci.ics.jung.visualization.transform.shape.GraphicsDecorator;
public class JungPerformance
{
public static void main(String[] args)
{
SwingUtilities.invokeLater(new Runnable()
{
@Override
public void run()
{
createAndShowGUI();
}
});
}
private static void createAndShowGUI()
{
JFrame f = new JFrame();
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Graph<String, String> g = createGraph();
Dimension size = new Dimension(800,800);
VisualizationViewer<String, String> vv =
new VisualizationViewer<String, String>(
new FRLayout<String, String>(g, size));
DefaultModalGraphMouse<String, Double> graphMouse =
new DefaultModalGraphMouse<String, Double>();
vv.setGraphMouse(graphMouse);
improvePerformance(vv);
f.getContentPane().add(vv);
f.setSize(size);
f.setLocationRelativeTo(null);
f.setVisible(true);
}
// This method summarizes several options for improving the painting
// performance. Enable or disable them depending on which visual features
// you want to sacrifice for the higher performance.
private static <V, E> void improvePerformance(
VisualizationViewer<V, E> vv)
{
// Probably the most important step for the pure rendering performance:
// Disable anti-aliasing
vv.getRenderingHints().remove(RenderingHints.KEY_ANTIALIASING);
// Skip vertices that are not inside the visible area.
doNotPaintInvisibleVertices(vv);
// May be helpful for performance in general, but not appropriate
// when there are multiple edges between a pair of nodes: Draw
// the edges not as curves, but as straight lines:
vv.getRenderContext().setEdgeShapeTransformer(new EdgeShape.Line<V,E>());
// May be helpful for painting performance: Omit the arrow heads
// of directed edges
Predicate<Context<Graph<V, E>, E>> edgeArrowPredicate =
new Predicate<Context<Graph<V,E>,E>>()
{
@Override
public boolean evaluate(Context<Graph<V, E>, E> arg0)
{
return false;
}
};
vv.getRenderContext().setEdgeArrowPredicate(edgeArrowPredicate);
}
// Skip all vertices that are not in the visible area.
// NOTE: See notes at the end of this method!
private static <V, E> void doNotPaintInvisibleVertices(
VisualizationViewer<V, E> vv)
{
Predicate<Context<Graph<V, E>, V>> vertexIncludePredicate =
new Predicate<Context<Graph<V,E>,V>>()
{
Dimension size = new Dimension();
@Override
public boolean evaluate(Context<Graph<V, E>, V> c)
{
vv.getSize(size);
Point2D point = vv.getGraphLayout().transform(c.element);
Point2D transformed =
vv.getRenderContext().getMultiLayerTransformer()
.transform(point);
if (transformed.getX() < 0 || transformed.getX() > size.width)
{
return false;
}
if (transformed.getY() < 0 || transformed.getY() > size.height)
{
return false;
}
return true;
}
};
vv.getRenderContext().setVertexIncludePredicate(vertexIncludePredicate);
// NOTE: By default, edges will NOT be included in the visualization
// when ONE of their vertices is NOT included in the visualization.
// This may look a bit odd when zooming and panning over the graph.
// Calling the following method will cause the edges to be skipped
// ONLY when BOTH their vertices are NOT included in the visualization,
// which may look nicer and more intuitive
doPaintEdgesAtLeastOneVertexIsVisible(vv);
}
// See note at end of "doNotPaintInvisibleVertices"
private static <V, E> void doPaintEdgesAtLeastOneVertexIsVisible(
VisualizationViewer<V, E> vv)
{
vv.getRenderer().setEdgeRenderer(new BasicEdgeRenderer<V, E>()
{
@Override
public void paintEdge(RenderContext<V,E> rc, Layout<V, E> layout, E e)
{
GraphicsDecorator g2d = rc.getGraphicsContext();
Graph<V,E> graph = layout.getGraph();
if (!rc.getEdgeIncludePredicate().evaluate(
Context.<Graph<V,E>,E>getInstance(graph,e)))
return;
Pair<V> endpoints = graph.getEndpoints(e);
V v1 = endpoints.getFirst();
V v2 = endpoints.getSecond();
if (!rc.getVertexIncludePredicate().evaluate(
Context.<Graph<V,E>,V>getInstance(graph,v1)) &&
!rc.getVertexIncludePredicate().evaluate(
Context.<Graph<V,E>,V>getInstance(graph,v2)))
return;
Stroke new_stroke = rc.getEdgeStrokeTransformer().transform(e);
Stroke old_stroke = g2d.getStroke();
if (new_stroke != null)
g2d.setStroke(new_stroke);
drawSimpleEdge(rc, layout, e);
// restore paint and stroke
if (new_stroke != null)
g2d.setStroke(old_stroke);
}
});
}
public static Graph<String, String> createGraph()
{
Random random = new Random(0);
int numVertices = 2500;
int numEdges = 5000;
Graph<String, String> g = new DirectedSparseGraph<String, String>();
for (int i=0; i<numVertices; i++)
{
g.addVertex("v"+i);
}
for (int i=0; i<numEdges; i++)
{
int v0 = random.nextInt(numVertices);
int v1 = random.nextInt(numVertices);
g.addEdge("e"+i, "v"+v0, "v"+v1);
}
return g;
}
}
@Marco13 的回答很好。我将补充(作为 JUNG 的作者之一)JUNG 目前在可视化缩放方面的主要缺陷是缺乏良好的空间数据结构。因此,力导向布局和较大图形的交互式可视化都可能非常慢。
在某些时候我们会着手解决这个问题(欢迎补丁 :))。