no chli figuretlet
This commit is contained in:
Lorenz Padberg
parent
cd8fd49bb9
commit
25afc5d8a1
|
|
@ -6,65 +6,101 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="w-full flex mt-6">
|
<div class="w-full flex mt-6">
|
||||||
<div class="bg-white flex flex-col w-1/3 m-5">
|
<div class="bg-white flex flex-col w-1/3 m-5">
|
||||||
<div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
|
<div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
|
||||||
|
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<svg width="400" height="400"> </svg>
|
<svg width="500" height="500">
|
||||||
|
<defs>
|
||||||
|
<marker id="triangle"
|
||||||
|
viewBox="0 0 10 10"
|
||||||
|
refX="5"
|
||||||
|
refY="5"
|
||||||
|
markerUnits="strokeWidth"
|
||||||
|
markerWidth="10" markerHeight="10"
|
||||||
|
orient="auto" overflow="visible" fill='#99C7E7'>
|
||||||
|
<path d="M -2 5 L 8 0 L 8 10 z"/>
|
||||||
|
</marker>
|
||||||
|
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
|
||||||
|
<div class="mt4">{{ page.description }}</div>
|
||||||
|
<div class="mt-4">{{ page.goals }}</div>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
|
|
||||||
<div class="mt4">{{ page.description }}</div>
|
|
||||||
<div class="mt-4">{{ page.goals }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gray-50 flex-col w-2/3">
|
<div class="bg-gray-50 flex-col w-2/3">
|
||||||
{% for learning_sequence in page.get_children %}
|
{% for learning_sequence in page.get_children %}
|
||||||
<div class="p-6 max-w-sm mx-auto bg-white shadow-lg m-4">
|
<div class="p-6 max-w-sm mx-auto bg-white shadow-lg m-4">
|
||||||
<h2 class="font-bold">{{ learning_sequence.title }}</h2>
|
<h2 class="font-bold">{{ learning_sequence.title }}</h2>
|
||||||
{% for learning_unit in learning_sequence.get_children %}
|
{% for learning_unit in learning_sequence.get_children %}
|
||||||
<div>
|
<div>
|
||||||
<h3>{{ learning_unit.title }}</h3>
|
<h3>{{ learning_unit.title }}</h3>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var data = [5,5,5,5,5];
|
var data = [5, 5, 5, 5, 5];
|
||||||
|
|
||||||
var svg = d3.select("svg"),
|
var svg = d3.select("svg"),
|
||||||
width = svg.attr("width"),
|
width = svg.attr("width"),
|
||||||
height = svg.attr("height"),
|
height = svg.attr("height"),
|
||||||
radius = Math.min(width, height) / 2,
|
radius = Math.min(width, height) / 2.5,
|
||||||
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
||||||
|
|
||||||
var color = d3.scaleOrdinal(['#99C7E7']);
|
|
||||||
|
|
||||||
// Generate the pie
|
|
||||||
var pie = d3.pie();
|
|
||||||
|
|
||||||
// Generate the arcs
|
|
||||||
var arc = d3.arc()
|
|
||||||
.innerRadius(radius/2.5)
|
|
||||||
.padAngle(12/360)
|
|
||||||
.outerRadius(radius);
|
|
||||||
|
|
||||||
//Generate groups
|
|
||||||
var arcs = g.selectAll("arc")
|
|
||||||
.data(pie(data))
|
|
||||||
.enter()
|
|
||||||
.append("g")
|
|
||||||
.attr("class", "arc")
|
|
||||||
|
|
||||||
//Draw arc paths
|
|
||||||
arcs.append("path")
|
|
||||||
.attr("fill", function(d, i) {
|
|
||||||
return color(i);
|
|
||||||
})
|
|
||||||
.attr("d", arc);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
|
var color = '#99C7E7';
|
||||||
|
|
||||||
|
// Generate the pie
|
||||||
|
var pie = d3.pie();
|
||||||
|
|
||||||
|
// Generate the arcs
|
||||||
|
var arc = d3.arc()
|
||||||
|
.innerRadius(radius / 2.5)
|
||||||
|
.padAngle(12 / 360)
|
||||||
|
.outerRadius(radius);
|
||||||
|
|
||||||
|
// Generate the arrows
|
||||||
|
var arrow = d3.arc()
|
||||||
|
.innerRadius(radius * 1.15)
|
||||||
|
.padAngle(30 / 360)
|
||||||
|
.outerRadius(radius * 1.16);
|
||||||
|
|
||||||
|
|
||||||
|
//Generate groups
|
||||||
|
var arcs = g.selectAll("arc")
|
||||||
|
.data(pie(data))
|
||||||
|
.enter()
|
||||||
|
.append("g")
|
||||||
|
.attr("class", "arc")
|
||||||
|
|
||||||
|
|
||||||
|
//Generate groups
|
||||||
|
var arrows = g.selectAll("arrow")
|
||||||
|
.data(pie(data))
|
||||||
|
.enter()
|
||||||
|
.append("g")
|
||||||
|
.attr("class", "arrow")
|
||||||
|
.attr("marker-start", "url(#triangle)")
|
||||||
|
|
||||||
|
|
||||||
|
var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)")
|
||||||
|
|
||||||
|
|
||||||
|
//Draw arc paths
|
||||||
|
arcs.append("path")
|
||||||
|
.attr("fill", color)
|
||||||
|
.attr("d", arc)
|
||||||
|
|
||||||
|
//Draw arrow paths
|
||||||
|
arrows.append("path")
|
||||||
|
.attr("fill", color)
|
||||||
|
.attr("d", arrow)
|
||||||
|
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue