improve cluster view

This commit is contained in:
Ivan Hörler 2018-08-21 21:55:33 +02:00
parent 00fd8301b2
commit 5a472dc25c
2 changed files with 76 additions and 24 deletions

View File

@ -5,27 +5,15 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
<title>CS-EHEC-II</title>
<%--<script src="https://d3js.org/d3.v4.min.js"></script>--%>
<%--<script src="http://cdn.graphalchemist.com/alchemy.min.js"></script>--%>
<%--<link rel="stylesheet" type="text/css" href="cluster_dependencies/alchemy/alchemy.css" />--%>
<%--<link rel="stylesheet" type="text/css" href="cluster_dependencies/alchemy/alchemy.min.css" />--%>
<%--<link rel="stylesheet" type="text/css" href="cluster_dependencies/alchemy/styles/vendor.css" />--%>
<%--<link rel="stylesheet" type="text/css" href="cluster_dependencies/bootstrap/css/bootstrap.css" />--%>
<%--<script type="text/javascript" src="cluster_dependencies/jquery/jquery-3.3.1.min.js"></script> --%>
<%--<script type="text/javascript" src="cluster_dependencies/lodash/lodash.js"></script>--%>
<%--<script type="text/javascript" src="cluster_dependencies/bootstrap/js/bootstrap.bundle.js"></script>--%>
<%--<script type="text/javascript" src="cluster_dependencies/bootstrap/js/bootstrap.bundle.min.js"></script>--%>
<%--<script type="text/javascript" src="cluster_dependencies/d3/d3.min.js"></script>--%>
<%--<script type="text/javascript" src="cluster_dependencies/d3/d3.js"></script>--%>
<%--<script type="text/javascript" src="cluster_dependencies/alchemy/alchemy.js"></script>--%>
<%--<script type="text/javascript" src="cluster_dependencies/alchemy/alchemy.min.js"></script>--%>
<%--<script type="text/javascript" src="cluster_dependencies/alchemy/scripts/vendor.js"></script>--%>
<script type="text/javascript" src="cluster_dependencies/jquery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="cluster_dependencies/bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="cluster_dependencies/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="cluster_dependencies/visjs/dist/vis.js"></script>
<link href="cluster_dependencies/visjs/dist/vis.css" rel="stylesheet" type="text/css" />
<%--<link href="cluster_dependencies/visjs/dist/vis-network.min.css" rel="stylesheet" type="text/css" />--%>
<link href="cluster_dependencies/visjs/dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 1500px;
width: 800px;
height: 800px;
border: 1px solid lightgray;
background-color: black
@ -70,16 +58,76 @@
// provide data in the normal fashion
var data = {
nodes: nodes,
edges: edges,
edges: edges
};
var options = {};
//var options = {};
var options = {
autoResize: true,
height: '100%',
width: '100%',
physics: {
enabled: true,
forceAtlas2Based: {
gravitationalConstant: -50,
centralGravity: 0.01,
springConstant: 0.08,
springLength: 100,
damping: 0.4,
avoidOverlap: 0.2
},
maxVelocity: 50,
minVelocity: 0.1,
solver: 'forceAtlas2Based',
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 100,
onlyDynamicEdges: false,
fit: true
},
timestep: 0.5,
adaptiveTimestep: true
},
layout: {
//randomSeed: undefined,
improvedLayout: true,
hierarchical: {
enabled: false,
levelSeparation: 150,
nodeSpacing: 500,
treeSpacing: 100,
blockShifting: true,
edgeMinimization: true,
parentCentralization: true,
direction: 'UD', // UD, DU, LR, RL
sortMethod: 'directed' // hubsize, directed
}
},
groups: {
result: {
size: 40,
color: {
background: 'red'
}, borderWidth: 3
},
origin: {
size: 30,
color: {
background: 'green'
}, borderWidth: 3
},
patient: {
size: 60,
color: {
background: 'yellow'
}, borderWidth: 3
}
}
};
// initialize your network!
var network = new vis.Network(container, data, options);
var clusterIndex = 0;
var options = {};
// initialize your network!
var network = new vis.Network(container, data, options);
</script>
</body>

View File

@ -10,6 +10,7 @@ namespace EHEC_Server
public string Id { get; set; }
public string Label { get; set; }
public string Title { get; set; }
public string Group { get; set; }
public Node() { }
public List<Node> GetNodes()
{
@ -31,6 +32,7 @@ namespace EHEC_Server
{
Id = cityElement.CityUid,
Title = "origin",
Group = "origin",
Label = cityElement.CityName,
};
clusterCities.Add(clusterCity);
@ -49,6 +51,7 @@ namespace EHEC_Server
{
Id = element.PatientUid,
Title = "patient",
Group = "patient",
Label = element.FirstName + " " + element.LastName
};
clusterPatients.Add(clusterPatient);
@ -67,6 +70,7 @@ namespace EHEC_Server
{
Id = element.ResultUid,
Title = "result",
Group = "result",
Label = element.Name
};
clusterResults.Add(clusterResult);