Graphique avec choix de catégorie

This commit is contained in:
Éric Li 2021-04-30 11:26:02 +02:00
parent f8f8af0e46
commit bf2074a131
2 changed files with 57 additions and 69 deletions

View File

@ -4,7 +4,6 @@
<script src="https://d3js.org/d3.v5.js"></script> <script src="https://d3js.org/d3.v5.js"></script>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<!--
<div class="field is-horizontal"> <div class="field is-horizontal">
<div class="control"> <div class="control">
<label class="checkbox"> <label class="checkbox">
@ -20,7 +19,7 @@
ACs ACs
</label> </label>
</div> </div>
</div>--> </div>
<svg style="border: 1px solid black; margin: auto;"></svg> <svg style="border: 1px solid black; margin: auto;"></svg>
<script src="js/graph.js"></script> <script src="js/graph.js"></script>
{% endblock %} {% endblock %}

View File

@ -1,5 +1,4 @@
drag = simulation => { drag = simulation => {
function dragstarted(d) { function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart(); if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x; d.fx = d.x;
@ -27,8 +26,36 @@ const graph = {{data}}
var nodes = graph["nodes"] var nodes = graph["nodes"]
var links = graph["links"] var links = graph["links"]
$("document").ready(function() { const nodetypes = Array.from(new Set(nodes.map(node => node.type)))
const linktypes = Array.from(new Set(links.map(link => link.type)))
const color = d3.scaleOrdinal(nodetypes.concat(linktypes),d3.schemeCategory10)
var height = 800, width = 800;
var svg = d3.select("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
var simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength(-400))
.force("link", d3.forceLink(links).id(node => node.id).distance(50))
.force("x", d3.forceX())
.force("y", d3.forceY())
.on("tick", ticked);
var link = svg.append("g")
.attr("stroke-width", 1.5)
.attr("class","links")
.selectAll("line")
var node = svg.append("g")
.attr("stroke-width", 1)
.attr("stroke", "black")
.attr("class", "nodes")
.selectAll("g")
redraw();
$("document").ready(function() {
$(".categorie").click(function() { $(".categorie").click(function() {
nodes = [] nodes = []
links = [] links = []
@ -42,87 +69,49 @@ $("document").ready(function() {
if($("#SAEs").prop("checked")) {graph["links"].map(link => {if(link.type == "SAEToAC"){links.push(link);}})} if($("#SAEs").prop("checked")) {graph["links"].map(link => {if(link.type == "SAEToAC"){links.push(link);}})}
nodes.concat(graph["nodes"].map(node => {if(node.type == "AC"){nodes.push(node);}})); nodes.concat(graph["nodes"].map(node => {if(node.type == "AC"){nodes.push(node);}}));
} }
redraw();
redraw()
simulation.nodes(nodes);
simulation.force("links", d3.forceLink(links).id(node => node.id));
simulation.alpha(1).restart();
}); });
function redraw() {
$(".nodes").children().remove();
NODE.data(nodes)
.remove()
.enter().append("rect")
.attr("width", 40)
.attr("height", 20)
.attr("x", -20)
.attr("y", -10)
.attr("rx", 5)
.attr("ry", 5)
.attr("fill", function(d) { return color(d.type); });
}
}); });
const nodetypes = Array.from(new Set(nodes.map(node => node.type))) function redraw() {
const linktypes = Array.from(new Set(links.map(link => link.type)))
const color = d3.scaleOrdinal(nodetypes.concat(linktypes),d3.schemeCategory10) link = link.data(links)
var height = 800, width = 800;
var svg = d3.select("svg")
.attr("viewBox", [0, 0, width, height])
var simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength(-400))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("link", d3.forceLink(links).id(node => node.id));
var link = svg.append("g")
.attr("stroke-width", 1.5)
.attr("class","links")
.selectAll("line")
.data(links)
.join("line") .join("line")
.attr("stroke", d => color(d.type)); .attr("stroke", d => color(d.type));
node.selectAll("text").remove();
node.selectAll("rect").remove();
var NODE = svg.append("g") node = node.data(nodes)
.attr("stroke-width", 1)
.attr("stroke", "black")
.attr("class","nodes")
.selectAll("g")
.data(nodes)
.join("g") .join("g")
.call(drag(simulation)); .attr("class","node")
.call(drag(simulation))
NODE.append("rect") node.append("rect")
.attr("width", 40) .attr("width", 20)
.attr("height", 20) .attr("height", 10)
.attr("x", -20) .attr("x", -10)
.attr("y", -10) .attr("y", -5)
.attr("rx", 5) .attr("rx", 5)
.attr("ry", 5) .attr("ry", 5)
.attr("fill", function(d) { return color(d.type); }); .attr("fill", function(d) { return color(d.type); })
NODE.append("text") node.append("text")
.text(d => d.id) .attr("style", "user-select: none")
.attr("dx", 15) .text(d => d.id)
.attr("dy", 25) .attr("dx", 7)
.attr("dy", 12)
simulation.on("tick", ticked); simulation.nodes(nodes);
simulation.force("links", d3.forceLink(links).id(node => node.id).distance(100));
simulation.alpha(0.5).restart();
}
function ticked() { function ticked() {
link.attr("x1", function(d) { return d.source.x; }) link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; }) .attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; }) .attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; }); .attr("y2", function(d) { return d.target.y; });
node
NODE
.attr("transform", d => `translate(${d.x},${d.y})`); .attr("transform", d => `translate(${d.x},${d.y})`);
} }