prototype de graph
This commit is contained in:
parent
d6e00909be
commit
b95a0410d1
@ -9,6 +9,7 @@
|
|||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||||
<script src="https://unpkg.com/lunr/lunr.js"></script>
|
<script src="https://unpkg.com/lunr/lunr.js"></script>
|
||||||
|
{% block head %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Barre de navigation -->
|
<!-- Barre de navigation -->
|
||||||
@ -38,6 +39,7 @@
|
|||||||
<a class="navbar-item" href="index.html">Semestre 6</a>
|
<a class="navbar-item" href="index.html">Semestre 6</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
|
<a class="navbar-item" href="graph.html">Graphique</a>
|
||||||
<div class="navbar-item">
|
<div class="navbar-item">
|
||||||
<!-- Bouton pour afficher un boite de dialogue pour la recherche -->
|
<!-- Bouton pour afficher un boite de dialogue pour la recherche -->
|
||||||
<button id="rechercheBouton" class="button is-rounded is-primary">
|
<button id="rechercheBouton" class="button is-rounded is-primary">
|
||||||
|
@ -222,6 +222,9 @@ documents = {}
|
|||||||
# Dictionnaire de ACs contenant la liste des SAE qui les mobilisent
|
# Dictionnaire de ACs contenant la liste des SAE qui les mobilisent
|
||||||
SAE_mobilise_AC = {}
|
SAE_mobilise_AC = {}
|
||||||
|
|
||||||
|
# Dictionnaires des relations entre les ressources pour le graph
|
||||||
|
relations = {"nodes": [], "links": []}
|
||||||
|
|
||||||
# Création des pages individuelles ressources, saes, exemples
|
# Création des pages individuelles ressources, saes, exemples
|
||||||
for indexSem, sem in enumerate(ressources):
|
for indexSem, sem in enumerate(ressources):
|
||||||
for i, ressource in enumerate(ressources[sem]):
|
for i, ressource in enumerate(ressources[sem]):
|
||||||
@ -245,6 +248,15 @@ for indexSem, sem in enumerate(ressources):
|
|||||||
defineSearchTerm(data, url, documents)
|
defineSearchTerm(data, url, documents)
|
||||||
template.stream(datas).dump(REPERTOIRE_HTML + "/" + url)
|
template.stream(datas).dump(REPERTOIRE_HTML + "/" + url)
|
||||||
|
|
||||||
|
relations["nodes"].append({"id": data["code"]})
|
||||||
|
for sae in data["sae"]:
|
||||||
|
if not any(sae in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": sae})
|
||||||
|
relations["links"].append({"source": data["code"], "target": sae, "type": "RessourceToSAE"})
|
||||||
|
for rt in data["acs"]:
|
||||||
|
for ac in data["acs"][rt]:
|
||||||
|
if not any(ac in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": ac})
|
||||||
|
relations["links"].append({"source": data["code"], "target": ac, "type": "RessourceToAC"})
|
||||||
|
|
||||||
#Créer un fichier contenant la liste des ressources du semestre
|
#Créer un fichier contenant la liste des ressources du semestre
|
||||||
data = {"data" : ressources[sem],"sem" : sem} # "data" contient un tableau des ressources du semestre
|
data = {"data" : ressources[sem],"sem" : sem} # "data" contient un tableau des ressources du semestre
|
||||||
template_List_Ressource.stream(data).dump(REPERTOIRE_HTML + "/ressources" + str(sem) + ".html")
|
template_List_Ressource.stream(data).dump(REPERTOIRE_HTML + "/ressources" + str(sem) + ".html")
|
||||||
@ -270,9 +282,16 @@ for indexSem, sem in enumerate(ressources):
|
|||||||
|
|
||||||
for rt, acs in sae.getInfo()["acs"].items():
|
for rt, acs in sae.getInfo()["acs"].items():
|
||||||
for ac in acs:
|
for ac in acs:
|
||||||
if ac not in SAE_mobilise_AC: SAE_mobilise_AC[ac] = []
|
if not ac in SAE_mobilise_AC: SAE_mobilise_AC[ac] = []
|
||||||
SAE_mobilise_AC[ac].append(sae.getInfo())
|
SAE_mobilise_AC[ac].append(sae.getInfo())
|
||||||
|
|
||||||
|
if not any(data["code"] in node["id"] for node in relations["nodes"]):
|
||||||
|
relations["nodes"].append({"id": data["code"]})
|
||||||
|
for rt in data["acs"]:
|
||||||
|
for ac in data["acs"][rt]:
|
||||||
|
if not any(ac in node["id"] for node in relations["nodes"]): relations["nodes"].append({"id": ac})
|
||||||
|
relations["links"].append({"source": data["code"], "target": ac, "type": "SAEToAC"})
|
||||||
|
|
||||||
for sae in exemples[sem]:
|
for sae in exemples[sem]:
|
||||||
i = 1 # Nommage des fichiers exemple sae peut être modifier
|
i = 1 # Nommage des fichiers exemple sae peut être modifier
|
||||||
for j, exemple in enumerate(exemples[sem][sae]):
|
for j, exemple in enumerate(exemples[sem][sae]):
|
||||||
@ -335,14 +354,7 @@ template_recherche = env.get_template("baseTemplate.js")
|
|||||||
template_recherche.stream(documents=documents).dump(REPERTOIRE_JS + "/base.js")
|
template_recherche.stream(documents=documents).dump(REPERTOIRE_JS + "/base.js")
|
||||||
|
|
||||||
# Créer un fichier contenant le graphe des relations entres les toutes les ressources
|
# Créer un fichier contenant le graphe des relations entres les toutes les ressources
|
||||||
"""
|
datas = {"data": relations}
|
||||||
data = []
|
|
||||||
for sem in ressources:
|
|
||||||
for ressource in ressources[sem]:
|
|
||||||
data.append({"key": ressource.getInfo()["code"]})
|
|
||||||
datas = {"data": data}
|
|
||||||
"""
|
|
||||||
datas = {"data": SAE_mobilise_AC}
|
|
||||||
template_graph = env.get_template("graphTemplate.html")
|
template_graph = env.get_template("graphTemplate.html")
|
||||||
template_graphJS = env.get_template("graphTemplate.js")
|
template_graphJS = env.get_template("graphTemplate.js")
|
||||||
template_graph.stream().dump(REPERTOIRE_HTML + "/graph.html")
|
template_graph.stream().dump(REPERTOIRE_HTML + "/graph.html")
|
||||||
|
19
html/graphTemplate.html
Normal file
19
html/graphTemplate.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
{% block title %}Relation des ressources{% endblock %}
|
||||||
|
{% block head %}
|
||||||
|
<script src="https://d3js.org/d3.v5.js"></script>
|
||||||
|
{% endblock %}
|
||||||
|
{% block content %}
|
||||||
|
<style>
|
||||||
|
.node {
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
stroke: #999;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<svg width="960" height="500"></svg>
|
||||||
|
<script src="js/graph.js"></script>
|
||||||
|
{% endblock %}
|
67
html/graphTemplate.js
Normal file
67
html/graphTemplate.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
drag = simulation => {
|
||||||
|
|
||||||
|
function dragstarted(event) {
|
||||||
|
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||||
|
event.subject.fx = event.subject.x;
|
||||||
|
event.subject.fy = event.subject.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragged(event) {
|
||||||
|
event.subject.fx = event.x;
|
||||||
|
event.subject.fy = event.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragended(event) {
|
||||||
|
if (!event.active) simulation.alphaTarget(0);
|
||||||
|
event.subject.fx = null;
|
||||||
|
event.subject.fy = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return d3.drag()
|
||||||
|
.on("start", dragstarted)
|
||||||
|
.on("drag", dragged)
|
||||||
|
.on("end", dragended);
|
||||||
|
}
|
||||||
|
|
||||||
|
var svg = d3.select("svg"),
|
||||||
|
width = +svg.attr("width"),
|
||||||
|
height = +svg.attr("height");
|
||||||
|
|
||||||
|
var simulation = d3.forceSimulation()
|
||||||
|
.force("charge", d3.forceManyBody().strength(-200))
|
||||||
|
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(40))
|
||||||
|
.force("x", d3.forceX(width / 2))
|
||||||
|
.force("y", d3.forceY(height / 2))
|
||||||
|
.on("tick", ticked);
|
||||||
|
|
||||||
|
var link = svg.selectAll(".link"),
|
||||||
|
node = svg.selectAll(".node");
|
||||||
|
|
||||||
|
graph = {{data}}
|
||||||
|
|
||||||
|
|
||||||
|
simulation.nodes(graph.nodes);
|
||||||
|
simulation.force("link").links(graph.links);
|
||||||
|
|
||||||
|
link = link
|
||||||
|
.data(graph.links)
|
||||||
|
.enter().append("line")
|
||||||
|
.attr("class", "link");
|
||||||
|
|
||||||
|
node = node
|
||||||
|
.data(graph.nodes)
|
||||||
|
.enter().append("circle")
|
||||||
|
.attr("class", "node")
|
||||||
|
.attr("r", 6)
|
||||||
|
.style("fill", function(d) { return d.id; });
|
||||||
|
|
||||||
|
|
||||||
|
function ticked() {
|
||||||
|
link.attr("x1", function(d) { return d.source.x; })
|
||||||
|
.attr("y1", function(d) { return d.source.y; })
|
||||||
|
.attr("x2", function(d) { return d.target.x; })
|
||||||
|
.attr("y2", function(d) { return d.target.y; });
|
||||||
|
|
||||||
|
node.attr("cx", function(d) { return d.x; })
|
||||||
|
.attr("cy", function(d) { return d.y; });
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user