Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*
simple line chart, intakes x and y asynchronously
*/
// using https://bl.ocks.org/d3noob/402dd382a51a4f6eea487f9a35566de0
import {
Hunkify,
Input,
Output,
State
} from '../hunks.js'
function LineChart() {
Hunkify(this)
//
let xIn = new Input('number', 'xVar', this)
let yIn = new Input('number', 'yVar', this)
this.inputs.push(xIn, yIn)
// how many to keep
let keepers = new State('number', 'keepers', 20)
this.states.push(keepers)
//
this.dom = {}
this.init = () => {
console.log('HELLO linechart')
this.dom = $('<div>').attr('id', 'uniquechart').get(0)
}
var datas = [
[0, 0]
]
this.onload = () => {
// our vars,
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleLinear().range([0, width])
var y = d3.scaleLinear().range([height, 0])
var thesvg = null
console.log("svg", thesvg)
// make ah function
this.reloadDatas = () => {
var valueline = d3.line()
.x(function(d) {
return x(d[0])
})
.y(function(d) {
return y(d[1])
})
// scale
x.domain([d3.min(datas, function(d) {
return d[0]
}), d3.max(datas, function(d) {
return d[0];
})])
y.domain([d3.min(datas, function(d) {
return d[1]
}), d3.max(datas, function(d) {
return d[1];
})])
if(thesvg){
d3.select('#uniquechart').selectAll("*").remove()
}
thesvg = d3.select('#uniquechart').append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// write it?
thesvg.append("path")
.data([datas])
.attr("class", "line")
.attr("d", valueline)
// write the x axis
thesvg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// the y axis
thesvg.append("g")
.call(d3.axisLeft(y))
}
// so then
this.requestResize(960, 520)
// startup
this.reloadDatas()
}
// hmmm
this.loop = () => {
// pull and append
if (xIn.io && yIn.io) {
let npt = [xIn.get(), yIn.get()]
datas.push(npt)
if(datas.length > keepers.value){
datas.shift()
}
this.reloadDatas()
}
}
}
export default LineChart