forked from enviPath/enviPy
[Refactor] Large scale formatting/linting (#193)
All html files now prettier formatted and fixes for incompatible blocks applied Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#193 Co-authored-by: Tobias O <tobias.olenyi@envipath.com> Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
This commit is contained in:
@ -1,38 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Force-Directed Tree</title>
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<style>
|
||||
svg { width: 100%; height: 600px; }
|
||||
.link { stroke: #999; stroke-opacity: 0.6; marker-end: url(#arrow); }
|
||||
.link_no_arrow { stroke: #999; stroke-opacity: 0.6; }
|
||||
.node image { cursor: pointer; }
|
||||
.node circle { fill: lightblue; stroke: steelblue; stroke-width: 1.5px; }
|
||||
.highlighted { stroke: red; stroke-width: 3px; }
|
||||
.tooltip { position: absolute; background: lightgray; padding: 5px; border-radius: 5px; visibility: hidden; }
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
.link {
|
||||
stroke: #999;
|
||||
stroke-opacity: 0.6;
|
||||
marker-end: url(#arrow);
|
||||
}
|
||||
.link_no_arrow {
|
||||
stroke: #999;
|
||||
stroke-opacity: 0.6;
|
||||
}
|
||||
.node image {
|
||||
cursor: pointer;
|
||||
}
|
||||
.node circle {
|
||||
fill: lightblue;
|
||||
stroke: steelblue;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
.highlighted {
|
||||
stroke: red;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
background: lightgray;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p></p>
|
||||
{{ pathway.name|safe }}
|
||||
<div id="viz">
|
||||
<svg width="2000" height="2000"> <!-- Sehr großes SVG für Zoom -->
|
||||
</head>
|
||||
<body>
|
||||
<p></p>
|
||||
{{ pathway.name|safe }}
|
||||
<div id="viz">
|
||||
<svg width="2000" height="2000">
|
||||
<!-- Sehr großes SVG für Zoom -->
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
|
||||
orient="auto-start-reverse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
|
||||
</marker>
|
||||
<marker
|
||||
id="arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="43"
|
||||
refY="5"
|
||||
markerWidth="6"
|
||||
markerHeight="6"
|
||||
orient="auto-start-reverse"
|
||||
>
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="zoomable"></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="tooltip" class="tooltip"></div>
|
||||
<script>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="tooltip" class="tooltip"></div>
|
||||
|
||||
{# prettier-ignore-start #}
|
||||
<script>
|
||||
function assignPositions(nodes) {
|
||||
const levelSpacing = 75; // Vertikaler Abstand zwischen den Tiefen
|
||||
const horizontalSpacing = 75; // Abstand zwischen Knoten auf gleicher Tiefe
|
||||
@ -62,7 +95,7 @@ function nodeClick(event, node, t) {
|
||||
const chargeStrength = -200;
|
||||
const depthSpacing = 150;
|
||||
const width = 800, height = 600;
|
||||
|
||||
|
||||
const tooltip = d3.select("#tooltip");
|
||||
const zoomable = d3.select("#zoomable");
|
||||
|
||||
@ -72,7 +105,7 @@ function nodeClick(event, node, t) {
|
||||
.on("zoom", (event) => {
|
||||
zoomable.attr("transform", event.transform);
|
||||
});
|
||||
|
||||
|
||||
d3.select("svg").call(zoom);
|
||||
|
||||
data = {{ pathway.d3_json | safe }};
|
||||
@ -110,7 +143,7 @@ function nodeClick(event, node, t) {
|
||||
.style("left", `${event.pageX + 5}px`);
|
||||
})
|
||||
.on("mouseout", () => tooltip.style("visibility", "hidden"));
|
||||
|
||||
|
||||
// Knoten zeichnen
|
||||
const node = zoomable.append("g")
|
||||
.selectAll("g")
|
||||
@ -135,13 +168,13 @@ function nodeClick(event, node, t) {
|
||||
.style("left", `${event.pageX + 5}px`);
|
||||
})
|
||||
.on("mouseout", () => tooltip.style("visibility", "hidden"));
|
||||
|
||||
|
||||
// Kreise für die Knoten hinzufügen
|
||||
node.append("circle")
|
||||
// make radius "invisible"
|
||||
.attr("r", d => d.pseudo ? 0.01 : nodeRadius)
|
||||
.style("fill", "#e8e8e8");
|
||||
|
||||
|
||||
// Add image only for non pseudo nodes
|
||||
node.filter(d => !d.pseudo).append("image")
|
||||
.attr("xlink:href", d => d.image)
|
||||
@ -150,14 +183,14 @@ function nodeClick(event, node, t) {
|
||||
.attr("width", nodeRadius * 2)
|
||||
.attr("height", nodeRadius * 2);
|
||||
|
||||
|
||||
|
||||
// Funktion für das Update der Positionen
|
||||
function ticked() {
|
||||
link.attr("x1", d => d.source.x)
|
||||
.attr("y1", d => d.source.y)
|
||||
.attr("x2", d => d.target.x)
|
||||
.attr("y2", d => d.target.y);
|
||||
|
||||
|
||||
node.attr("transform", d => `translate(${d.x},${d.y})`);
|
||||
}
|
||||
|
||||
@ -178,17 +211,27 @@ function nodeClick(event, node, t) {
|
||||
}
|
||||
|
||||
</script>
|
||||
<svg width="400" height="300">
|
||||
<path d="M200,50 C200,100 150,150 150,200" stroke="black" fill="none" stroke-width="2"/>
|
||||
<path d="M200,50 C200,100 250,150 250,200" stroke="black" fill="none" stroke-width="2"/>
|
||||
|
||||
<!-- Knoten -->
|
||||
<circle cx="200" cy="50" r="5" fill="blue"/>
|
||||
<circle cx="150" cy="200" r="5" fill="red"/>
|
||||
<circle cx="250" cy="200" r="5" fill="red"/>
|
||||
</svg>
|
||||
</body>
|
||||
{% load static %}
|
||||
<script src="{% static 'js/pw.js' %}"></script>
|
||||
{# prettier-ignore-end #}
|
||||
<svg width="400" height="300">
|
||||
<path
|
||||
d="M200,50 C200,100 150,150 150,200"
|
||||
stroke="black"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M200,50 C200,100 250,150 250,200"
|
||||
stroke="black"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<!-- Knoten -->
|
||||
<circle cx="200" cy="50" r="5" fill="blue" />
|
||||
<circle cx="150" cy="200" r="5" fill="red" />
|
||||
<circle cx="250" cy="200" r="5" fill="red" />
|
||||
</svg>
|
||||
</body>
|
||||
{% load static %}
|
||||
<script src="{% static 'js/pw.js' %}"></script>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user