This commit is contained in:
Lorenz Padberg
parent
16a4c8ccb4
commit
21f69338b6
|
|
@ -1,75 +1,58 @@
|
|||
<script>
|
||||
import * as d3 from 'd3';
|
||||
import * as d3 from 'd3'
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
const data = [5, 5, 5, 5, 5]
|
||||
|
||||
var data = [5, 5, 5, 5, 5];
|
||||
const width = 500,
|
||||
height = 500,
|
||||
radius = Math.min(width, height) / 2.5
|
||||
|
||||
var width = 500, height = 500, radius = Math.min(width, height) / 2.5
|
||||
const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
|
||||
|
||||
const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
|
||||
|
||||
var svg = d3.select(this.$el)
|
||||
.append('svg')
|
||||
.attr('width', 500)
|
||||
.attr('height', 500)
|
||||
|
||||
|
||||
var g = svg.append("g").attr('transform', "translate(" + width / 2 + "," + height / 2 + ")");
|
||||
|
||||
|
||||
var color = '#99C7E7';
|
||||
const color = '#99C7E7'
|
||||
|
||||
// Generate the pie
|
||||
var pie = d3.pie();
|
||||
const pie = d3.pie()
|
||||
|
||||
// Generate the arcs
|
||||
var arc = d3
|
||||
// Generate the arcs
|
||||
const arc = d3
|
||||
.arc()
|
||||
.innerRadius(radius / 2.5)
|
||||
.padAngle(12 / 360)
|
||||
.outerRadius(radius);
|
||||
.outerRadius(radius)
|
||||
|
||||
// Generate the arrows
|
||||
var arrow = d3.arc()
|
||||
// Generate the arrows
|
||||
const arrow = d3
|
||||
.arc()
|
||||
.innerRadius(radius * 1.15)
|
||||
.padAngle(30 / 360)
|
||||
.outerRadius(radius * 1.16);
|
||||
.outerRadius(radius * 1.16)
|
||||
|
||||
//Generate groups
|
||||
const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
|
||||
|
||||
//Generate groups
|
||||
var arcs = g.selectAll("arc")
|
||||
//Generate groups
|
||||
const arrows = g
|
||||
.selectAll('arrow')
|
||||
.data(pie(data))
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("class", "arc")
|
||||
.append('g')
|
||||
.attr('class', 'arrow')
|
||||
.attr('marker-start', 'url(#triangle)')
|
||||
|
||||
const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
|
||||
|
||||
//Generate groups
|
||||
var arrows = g.selectAll("arrow")
|
||||
.data(pie(data))
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("class", "arrow")
|
||||
.attr("marker-start", "url(#triangle)")
|
||||
//Draw arc paths
|
||||
arcs.append('path').attr('fill', color).attr('d', arc)
|
||||
|
||||
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)
|
||||
|
||||
|
||||
}
|
||||
//Draw arrow paths
|
||||
arrows.append('path').attr('fill', color).attr('d', arrow)
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -85,8 +68,6 @@ input {
|
|||
}
|
||||
</style>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="demo-chart" width="500" heigth="500"/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import * as d3 from 'd3'
|
||||
import * as _ from 'underscore'
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
learninglearningPathContents: {
|
||||
|
|
@ -102,51 +101,115 @@ export default {
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
|
||||
viewBox() {
|
||||
return `0 0 ${this.width} ${this.height}`
|
||||
},
|
||||
circles() {
|
||||
return _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'));
|
||||
|
||||
let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
|
||||
_.forEach(internalCircles, function (circle) {
|
||||
let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
|
||||
let pieGenerator = d3.pie()
|
||||
let pieData = pieGenerator(pieWeights)
|
||||
circle.pieData = pieData
|
||||
});
|
||||
return internalCircles
|
||||
},
|
||||
svg() {
|
||||
|
||||
const width = this.width
|
||||
const height = this.height
|
||||
return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
function getPieDataForCircle(circle) {
|
||||
const newArray = new Array(Math.max(d[2].learning_sequences.length, 1)).fill(1)
|
||||
return newArray
|
||||
return new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
|
||||
}
|
||||
|
||||
const learningPathContents = []
|
||||
console.log(this.circles)
|
||||
|
||||
const data = this.pieData
|
||||
|
||||
const circleWidth = 150
|
||||
|
||||
|
||||
const radius = (circleWidth * 0.7) / 2
|
||||
console.log(this.viewBox)
|
||||
|
||||
|
||||
const cicles = this.svg
|
||||
.selectAll('circle')
|
||||
// Create append pie charts to the main svg
|
||||
const pie = this.svg.selectAll('.pie')
|
||||
.data(this.circles)
|
||||
|
||||
pie
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'pie')
|
||||
.attr('fill', 'red')
|
||||
.attr('transform', (d, i) => {
|
||||
let x_coord = (i + 1) * circleWidth - radius + 100
|
||||
return 'translate(' + x_coord + ', 40)'
|
||||
})
|
||||
|
||||
let g = this.svg.selectAll('.pie')
|
||||
// .append('circle')
|
||||
// .attr('r', d => {
|
||||
// return 30
|
||||
// })
|
||||
// .attr('fill', 'green')
|
||||
// .attr('class', 'test')
|
||||
|
||||
|
||||
|
||||
//
|
||||
// let g = this.svg.selectAll('g').data(d => {
|
||||
// if (d) {
|
||||
// console.log(d.pieData + 'sdfklm');
|
||||
// return d.pieData
|
||||
// } else {
|
||||
// console.log('sdf')
|
||||
// return []
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
g.enter().append('g').attr('class', 'arc')
|
||||
|
||||
const arc = d3.arc()
|
||||
.outerRadius(300)
|
||||
.innerRadius(0);
|
||||
|
||||
g.append('path').attr('fill', 'red').attr('d', arc)
|
||||
|
||||
|
||||
|
||||
// //Generate groups
|
||||
// const arcs = g
|
||||
// .selectAll('arc')
|
||||
// .data(pie([5, 5, 5, 5]))
|
||||
// .enter()
|
||||
// .append('path')
|
||||
// .attr('d', arc)
|
||||
|
||||
// const pies = g.selectAll('arcs')
|
||||
// .data([1, 2, 3])
|
||||
// .enter()
|
||||
// .append('g')
|
||||
// .attr('cx', (d, i) => {
|
||||
// return (i + 1) * circleWidth - radius
|
||||
// })
|
||||
// .attr('cy', 150)
|
||||
// .attr('d', arcs)
|
||||
|
||||
const circles = this.svg
|
||||
.selectAll('.blunt_circles')
|
||||
.data(this.circles)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('class', 'blunt_circles')
|
||||
.attr('cx', (d, i) => {
|
||||
return (i + 1) * circleWidth - radius
|
||||
})
|
||||
.attr('cy', 150)
|
||||
.attr('r', radius)
|
||||
.attr('fill', '#99C7E7')
|
||||
.attr('stroke', 'black')
|
||||
|
||||
const circlesText = this.svg
|
||||
.selectAll('.circlesText')
|
||||
|
|
@ -196,80 +259,6 @@ export default {
|
|||
.attr('y2', 270)
|
||||
.attr('class', 'stroke-gray-500')
|
||||
.attr('stroke-width', 1.76)
|
||||
|
||||
|
||||
const g = this.svg.append('g').attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')')
|
||||
|
||||
|
||||
// Generate the pie
|
||||
const pie = d3.pie()
|
||||
|
||||
// Generate the arcs
|
||||
const arc = d3
|
||||
.arc()
|
||||
.innerRadius(radius / 2)
|
||||
.padAngle(12 / 360)
|
||||
.outerRadius(radius)
|
||||
|
||||
|
||||
//Generate groups
|
||||
const arcs = g.selectAll('arc')
|
||||
.data(pie(d => getPieDataForCircle(d)))
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'arc')
|
||||
|
||||
|
||||
//Draw arc paths
|
||||
arcs.append('path')
|
||||
.attr('d', arc)
|
||||
|
||||
// Add the path using this helper function
|
||||
|
||||
// console.log(this.pieData)
|
||||
// const data = this.pieData
|
||||
//
|
||||
// const width = this.width
|
||||
// const height = this.height
|
||||
// const radius = Math.min(width, height) / 2.5
|
||||
// console.log(this.viewBox)
|
||||
//
|
||||
//
|
||||
// const svg = d3.select(this.$el)
|
||||
// .append('svg')
|
||||
// .attr('width', width)
|
||||
// .attr('height', height)
|
||||
//
|
||||
//
|
||||
// const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
|
||||
//
|
||||
//
|
||||
// // Generate the pie
|
||||
// const pie = d3.pie()
|
||||
//
|
||||
// // Generate the arcs
|
||||
// const arc = d3
|
||||
// .arc()
|
||||
// .innerRadius(radius / 2)
|
||||
// .padAngle(12 / 360)
|
||||
// .outerRadius(radius)
|
||||
//
|
||||
//
|
||||
// //Generate groups
|
||||
// const arcs = g.selectAll('arc')
|
||||
// .data(pie(data))
|
||||
// .enter()
|
||||
// .append('g')
|
||||
// .attr('class', 'arc')
|
||||
//
|
||||
//
|
||||
// //Draw arc paths
|
||||
// arcs.append('path')
|
||||
// .attr('d', arc)
|
||||
//
|
||||
//
|
||||
// }
|
||||
//
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>$Title$</title>
|
||||
</head>
|
||||
<body>
|
||||
$END$
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -47,13 +47,11 @@ export default {
|
|||
topic.circles = []
|
||||
}
|
||||
if (child.type === 'learnpath.Circle') {
|
||||
console.log(child)
|
||||
topic.circles.push(child)
|
||||
}
|
||||
});
|
||||
learningPathContents.topics.push(topic)
|
||||
console.log(learningPathContents)
|
||||
console.log('oskadfjnmlasdmflkmsadlf')
|
||||
|
||||
|
||||
|
||||
this.learningPathContents = learningPathContents;
|
||||
|
|
|
|||
Loading…
Reference in New Issue