yfiles for java,JavaFX中的图形可视化（如yFiles）

Something like Graphviz but more specifically, yFiles.

I want a node/edge type of graph visualization.

I was thinking about making the node a Circle and the edge a Line. The problem is what to use for the area where the nodes/edges appear. Should I use a ScrollPane, a regular Pane, a Canvas, etc...

I will add scrolling functionality, zooming, selecting nodes & dragging nodes.

Thanks for the help.

解决方案

I had 2 hours to kill, so I thought I'd give it a shot. Turns out that it's easy to come up with a prototype.

Here's what you need:

a main class to use the graph library you create

a graph with a data model

easy adding and removing of nodes and edges (turns out that it's better to name the nodes cells in order to avoid confusion with JavaFX nodes during programming)

a layout algorithm for the graph

It's really too much to be asked on SO, so I'll just add the code with a few comments.

The application instantiates the graph, adds cells and connects them via edges.

application/Main.java

package application;

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.layout.BorderPane;

import javafx.stage.Stage;

import com.fxgraph.graph.CellType;

import com.fxgraph.graph.Graph;

import com.fxgraph.graph.Model;

import com.fxgraph.layout.base.Layout;

import com.fxgraph.layout.random.RandomLayout;

public class Main extends Application {

Graph graph = new Graph();

@Override

public void start(Stage primaryStage) {

BorderPane root = new BorderPane();

graph = new Graph();

root.setCenter(graph.getScrollPane());

Scene scene = new Scene(root, 1024, 768);

scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

primaryStage.setScene(scene);

primaryStage.show();

addGraphComponents();

Layout layout = new RandomLayout(graph);

layout.execute();

}

private void addGraphComponents() {

Model model = graph.getModel();

graph.beginUpdate();

model.addCell("Cell A", CellType.RECTANGLE);

model.addCell("Cell B", CellType.RECTANGLE);

model.addCell("Cell C", CellType.RECTANGLE);

model.addCell("Cell D", CellType.TRIANGLE);

model.addCell("Cell E", CellType.TRIANGLE);

model.addCell("Cell F", CellType.RECTANGLE);

model.addCell("Cell G", CellType.RECTANGLE);

model.addEdge("Cell A", "Cell B");

model.addEdge("Cell A", "Cell C");

model.addEdge("Cell B", "Cell C");

model.addEdge("Cell C", "Cell D");

model.addEdge("Cell B", "Cell E");

model.addEdge("Cell D", "Cell F");

model.addEdge("Cell D", "Cell G");

graph.endUpdate();

}

public static void main(String[] args) {

launch(args);

}

}

The scrollpane should have a white background.

application/application.css

.scroll-pane > .viewport {

-fx-background-color: white;

}

The zoomable scrollpane, I got the code base from pixel duke:

ZoomableScrollPane.java

package com.fxgraph.graph;

import javafx.event.EventHandler;

import javafx.scene.Group;

import javafx.scene.Node;

import javafx.scene.control.ScrollPane;

import javafx.scene.input.ScrollEvent;

import javafx.scene.transform.Scale;

public class ZoomableScrollPane extends ScrollPane {

Group zoomGroup;

Scale scaleTransform;

Node content;

double scaleValue = 1.0;

double delta = 0.1;

public ZoomableScrollPane(Node content) {

this.content = content;

Group contentGroup = new Group();

zoomGroup = new Group();

contentGroup.getChildren().add(zoomGroup);

zoomGroup.getChildren().add(content);

setContent(contentGroup);

scaleTransform = new Scale(scaleValue, scaleValue, 0, 0);

zoomGroup.getTransforms().add(scaleTransform);

zoomGroup.setOnScroll(new ZoomHandler());

}

public double getScaleValue() {

return scaleValue;

}

public void zoomToActual() {

zoomTo(1.0);

}

public void zoomTo(double scaleValue) {

this.scaleValue = scaleValue;

scaleTransform.setX(scaleValue);

scaleTransform.setY(