I’m implementing some D3 code in class format so that I have a reusable chart.
The errors are as follows:
GetElementsByClassName returns an HTMLCollection of length 0, but elements to be selected are classed correctly.
Circles appear at x0 and yMax, rather than at data positions (Issue is probably connected to the first).
Text is not appended to circle and not visible (This might work when the circles work).
I’m implementing this pretty much exactly as it looks, with the exception that I’m putting tooltips on 2/4 of the lines, and I’m using a class.
JavaScript
x
288
288
1
<!DOCTYPE html>2
<html>3
4
<head>5
<meta charset="UTF-8">6
<script src="https://d3js.org/d3.v7.js"></script>7
</head>8
9
<body>10
<div id="graph"></div>11
12
<script>13
class Chart {14
constructor(opts) {15
this.data = opts.data;16
this.element = opts.element;17
}18
19
draw() {20
this.width = this.element.offsetWidth;21
this.height = this.width / 2;22
this.padding = 50;23
this.margin = {24
top: 20,25
bottom: 20,26
left: 30,27
right: 5028
};29
30
this.element.innerHTML = '';31
const svg = d3.select(this.element).append('svg');32
svg.attr('width', this.width);33
svg.attr('height', this.height);34
35
this.plot = svg.append('g')36
.attr('transform', `translate(${this.margin.left},${this.margin.top})`);37
38
this.createScales();39
this.addAxes();40
this.addLine();41
this.tTip();42
}43
44
createScales() {45
this.keynames = d3.scaleOrdinal();46
47
this.keynames.domain(Object.keys(this.data[0]).filter(key => key !== 'date'));48
49
this.keymap = this.keynames.domain().map(50
keyname => ({51
name: keyname, values: this.data.map(52
d => ({ date: d.date, key: +d[keyname] })53
)54
})55
);56
57
const m = this.margin;58
59
const xExtent = d3.extent(this.data, d => d.date);60
61
const yExtent = [0, d3.max(this.keymap, d => d3.max(d.values, function (v) { return v.key }))];62
63
this.xScale = d3.scaleTime()64
.range([0, this.width - m.right])65
.domain(xExtent).nice();66
67
this.yScale = d3.scaleLinear()68
.range([this.height - (m.top + m.bottom), 0])69
.domain(yExtent).nice();70
}71
72
addAxes() {73
const m = this.margin;74
75
const xAxis = d3.axisBottom()76
.scale(this.xScale);77
78
const yAxis = d3.axisLeft()79
.scale(this.yScale);80
81
this.plot.append("g")82
.attr("class", "x axis")83
.attr("transform", `translate(0, ${this.height - (m.top + m.bottom)})`)84
.call(xAxis.ticks(8));85
86
this.plot.append("g")87
.attr("class", "y axis")88
.call(yAxis.ticks(4))89
.append("text")90
.attr("transform", "rotate(-90)")91
.attr("y", 6)92
.attr("dy", ".71em")93
.attr("fill", "black")94
.style("text-anchor", "end")95
.text("$USD");96
}97
98
addLine() {99
const line = d3.line()100
.x(d => this.xScale(d.date))101
.y(d => this.yScale(d.key));102
103
this.plot.append('g')104
.selectAll('path')105
.data(this.keymap)106
.join('path')107
.classed('line', true)108
.attr('d', function (d) { return line(d.values) })109
.style('stroke', this.lineColor || 'red')110
.style('fill', 'none');111
}112
113
tTip(){114
let mouseG = this.plot.append("g")115
.attr("class", "mouse-over-effects");116
117
mouseG.append("path") 118
.attr("class", "mouse-line")119
.style("stroke", "rgba(50,50,50,1)")120
.style("stroke-width", "0.5px")121
.style("opacity", "0");122
123
var lines = document.getElementsByClassName('.standard'); //issue here124
125
let mousePerLine = mouseG.selectAll('.mouse-per-line')126
.data(this.keymap)127
.enter()128
.append("g") //join instead of append?129
.attr("class", "mouse-per-line");130
131
mousePerLine.append("circle") //join instead of append?132
.attr("r", 4)133
.style("stroke", "black"134
)135
.style("fill", "blue"136
)137
.style("fill-opacity", "0.3")138
.style("stroke-width", "1px")139
.style("opacity", "0");140
141
mousePerLine.append("text") //join instead of append?142
.attr("transform", function(d){143
if (d.name == 'aapl') {144
return "translate(-50,30)"145
} else {146
return "translate(-50, -30)"147
}148
}).style("text-shadow",149
" -2px -2px 0 #FFF, 0 -2px 0 #FFF, 2px -2px 0 #FFF, 2px 0 0 #FFF, 2px 2px 0 #FFF, 0 2px 0 #FFF,-2px 2px 0 #FFF,-2px 0 0 #FFF");150
151
mouseG.append('svg:rect') 152
.attr('width', this.width) 153
.attr('height', this.height)154
.attr('x', '0')155
.attr('fill', 'none')156
.attr('pointer-events', 'all')157
.on('mouseout', function() { 158
d3.select(".mouse-line")159
.style("opacity", "0");160
d3.selectAll(".mouse-per-line circle")161
.style("opacity", "0");162
d3.selectAll(".mouse-per-line text")163
.style("opacity", "0");164
})165
.on('mouseover', function() { 166
d3.select(".mouse-line")167
.style("opacity", "1");168
d3.selectAll(".mouse-per-line circle")169
.style("opacity", "1");170
d3.selectAll(".mouse-per-line text")171
.style("opacity", "1");172
})173
.on('mousemove', () => { 174
let mouse = d3.pointer(event);175
d3.select(".mouse-line")176
.attr("d", () => {177
let d = "M" + mouse[0] + "," + this.height;178
d += " " + mouse[0] + "," + 0;179
return d;180
});181
182
d3.selectAll(".mouse-per-line")183
.attr("transform", (d, i) => {184
let xDate = this.xScale.invert(mouse[0]),185
bisect = d3.bisector(d => d.date).right,186
idx = bisect(d.values, xDate);187
188
let beginning = 0,189
end = lines[i].getTotalLength(),190
target = null;191
while (true){192
let target = Math.floor((beginning + end) / 2),193
pos = lines[i].getPointAtLength(target); //issue here194
if ((target === end || target === beginning) && pos.x !== mouse[0]) {195
break;196
}197
if (pos.x > mouse[0]){198
end = target;199
}200
else if (pos.x < mouse[0]){201
beginning = target;202
}203
else break; //position found204
}205
206
d3.select(this).select('text')207
.text( () => { "$" + this.yScale.invert(pos.y).toFixed(2)})208
return "translate(" + mouse[0] + "," + pos.y +")";209
})210
.style('font-family', 'Helvetica')211
.style('font-size', '11px')212
.style('letter-spacing', '1px')213
.style('text-transform', 'uppercase');214
});215
}216
217
setColor(newColor) {218
this.plot.select('.line')219
.style('stroke', newColor);220
221
this.lineColor = newColor;222
}223
224
setData(data) {225
this.data = data;226
227
this.draw();228
}229
}230
231
const chart = new Chart({ element: document.querySelector('#graph') });232
233
const data = d3.csvParse(`Date,AAPL,SMA_AAPL,TSLA,SMA_TSLA234
2018-12-31,38.33848571777344,,66.55999755859375,235
2019-01-02,38.382225036621094,,62.02399826049805,236
2019-01-03,34.55907440185547,,60.071998596191406,237
2019-01-04,36.03437805175781,,63.53799819946289,238
2019-01-07,35.95417022705078,,66.99199676513672,239
2019-01-08,36.63956832885742,,67.06999969482422,240
2019-01-09,37.26177215576172,,67.70600128173828,241
2019-01-10,37.380863189697266,,68.99400329589844,242
2019-01-11,37.013858795166016,,69.4520034790039,243
2019-01-14,36.4572868347168,,66.87999725341797,244
2019-01-15,37.20343780517578,,68.88600158691406,245
2019-01-16,37.657936096191406,,69.20999908447266,246
2019-01-17,37.88154602050781,,69.46199798583984,247
2019-01-18,38.11487579345703,,60.45199966430664,248
2019-01-22,37.259342193603516,,59.784000396728516,249
2019-01-23,37.410030364990234,,57.518001556396484,250
2019-01-24,37.113521575927734,,58.301998138427734,251
2019-01-25,38.34333801269531,,59.40800094604492,252
2019-01-28,37.988487243652344,,59.2760009765625,253
2019-01-29,37.59474182128906,,59.492000579833984,254
2019-01-30,40.16377258300781,,61.75400161743164,255
2019-01-31,40.453006744384766,,61.40399932861328,256
2019-02-01,40.472450256347656,,62.44200134277344,257
2019-02-04,41.622066497802734,,62.577999114990234,258
2019-02-05,42.33420181274414,,64.2699966430664,259
2019-02-06,42.34878158569336,,63.444000244140625,260
2019-02-07,41.546722412109375,,61.50199890136719,261
2019-02-08,41.59553909301758,,61.15999984741211,262
2019-02-11,41.35633087158203,,62.56800079345703,263
2019-02-12,41.71269989013672,38.606483713785806,62.36199951171875,63.48539975484212264
2019-02-13,41.539398193359375,38.71318079630534,61.63399887084961,63.32119979858398265
2019-02-14,41.69073486328125,38.823464457194014,60.75400161743164,63.278866577148435266
2019-02-15,41.59797286987305,39.05809440612793,61.57600021362305,63.32899996439616267
2019-02-19,41.72246551513672,39.247697321573895,61.12799835205078,63.24866663614909268
2019-02-20,41.990962982177734,39.44892374674479,60.512001037597656,63.032666778564455269
2019-02-21,41.75419616699219,39.619411341349284,58.24599838256836,62.738533401489256270
2019-02-22,42.22041702270508,39.78469950358073,58.94200134277344,62.44640007019043271
2019-02-25,42.5279655456543,39.95626958211263,59.75400161743164,62.13840001424153`, function (d) {272
function removeNaN(e, c) {273
if (e > 0) { return e; } else { return c; }274
}275
return {276
date: d3.timeParse("%Y-%m-%d")(d.Date),277
aapl: +d.AAPL,278
tsla: +d.TSLA,279
aapl_sma: removeNaN(+d.SMA_AAPL, +d.AAPL),280
tsla_sma: removeNaN(+d.SMA_TSLA, +d.TSLA)281
};282
});283
284
chart.setData(data);285
</script>286
</body>287
288
</html>As you can see the mouse interactions are pretty janky so I hope someone can help.
Advertisement
Answer
There are some differences between arrow function and regular function.
Fixed some more errors:
JavaScript
1
289
289
1
<!DOCTYPE html>2
<html>3
4
<head>5
<meta charset="UTF-8">6
<script src="https://d3js.org/d3.v7.js"></script>7
</head>8
9
<body>10
<div id="graph"></div>11
12
<script>13
let pos = null;14
class Chart {15
constructor(opts) {16
this.data = opts.data;17
this.element = opts.element;18
}19
20
draw() {21
this.width = this.element.offsetWidth;22
this.height = this.width / 2;23
this.padding = 50;24
this.margin = {25
top: 20,26
bottom: 20,27
left: 30,28
right: 5029
};30
31
this.element.innerHTML = '';32
const svg = d3.select(this.element).append('svg');33
svg.attr('width', this.width);34
svg.attr('height', this.height);35
36
this.plot = svg.append('g')37
.attr('transform', `translate(${this.margin.left},${this.margin.top})`);38
39
this.createScales();40
this.addAxes();41
this.addLine();42
this.tTip();43
}44
45
createScales() {46
this.keynames = d3.scaleOrdinal();47
48
this.keynames.domain(Object.keys(this.data[0]).filter(key => key !== 'date'));49
50
this.keymap = this.keynames.domain().map(51
keyname => ({52
name: keyname, values: this.data.map(53
d => ({ date: d.date, key: +d[keyname] })54
)55
})56
);57
58
const m = this.margin;59
60
const xExtent = d3.extent(this.data, d => d.date);61
62
const yExtent = [0, d3.max(this.keymap, d => d3.max(d.values, function (v) { return v.key }))];63
64
this.xScale = d3.scaleTime()65
.range([0, this.width - m.right])66
.domain(xExtent).nice();67
68
this.yScale = d3.scaleLinear()69
.range([this.height - (m.top + m.bottom), 0])70
.domain(yExtent).nice();71
}72
73
addAxes() {74
const m = this.margin;75
76
const xAxis = d3.axisBottom()77
.scale(this.xScale);78
79
const yAxis = d3.axisLeft()80
.scale(this.yScale);81
82
this.plot.append("g")83
.attr("class", "x axis")84
.attr("transform", `translate(0, ${this.height - (m.top + m.bottom)})`)85
.call(xAxis.ticks(8));86
87
this.plot.append("g")88
.attr("class", "y axis")89
.call(yAxis.ticks(4))90
.append("text")91
.attr("transform", "rotate(-90)")92
.attr("y", 6)93
.attr("dy", ".71em")94
.attr("fill", "black")95
.style("text-anchor", "end")96
.text("$USD");97
}98
99
addLine() {100
const line = d3.line()101
.x(d => this.xScale(d.date))102
.y(d => this.yScale(d.key));103
104
this.plot.append('g')105
.selectAll('path')106
.data(this.keymap)107
.join('path')108
.classed('line', true)109
.attr('d', function (d) { return line(d.values) })110
.style('stroke', this.lineColor || 'red')111
.style('fill', 'none');112
}113
114
tTip() {115
let mouseG = this.plot.append("g")116
.attr("class", "mouse-over-effects");117
118
mouseG.append("path")119
.attr("class", "mouse-line")120
.style("stroke", "rgba(50,50,50,1)")121
.style("stroke-width", "0.5px")122
.style("opacity", "0");123
124
var lines = document.getElementsByClassName('line'); //issue here125
126
let mousePerLine = mouseG.selectAll('.mouse-per-line')127
.data(this.keymap)128
.enter()129
.append("g") //join instead of append?130
.attr("class", "mouse-per-line");131
132
mousePerLine.append("circle") //join instead of append?133
.attr("r", 4)134
.style("stroke", "black"135
)136
.style("fill", "blue"137
)138
.style("fill-opacity", "0.3")139
.style("stroke-width", "1px")140
.style("opacity", "0");141
142
mousePerLine.append("text") //join instead of append?143
.attr("transform", function (d) {144
if (d.name == 'aapl') {145
return "translate(-50,30)"146
} else {147
return "translate(-50, -30)"148
}149
}).style("text-shadow",150
" -2px -2px 0 #FFF, 0 -2px 0 #FFF, 2px -2px 0 #FFF, 2px 0 0 #FFF, 2px 2px 0 #FFF, 0 2px 0 #FFF,-2px 2px 0 #FFF,-2px 0 0 #FFF");151
152
mouseG.append('svg:rect')153
.attr('width', this.width)154
.attr('height', this.height)155
.attr('x', '0')156
.attr('fill', 'none')157
.attr('pointer-events', 'all')158
.on('mouseout', function () {159
d3.select(".mouse-line")160
.style("opacity", "0");161
d3.selectAll(".mouse-per-line circle")162
.style("opacity", "0");163
d3.selectAll(".mouse-per-line text")164
.style("opacity", "0");165
})166
.on('mouseover', function () {167
d3.select(".mouse-line")168
.style("opacity", "1");169
d3.selectAll(".mouse-per-line circle")170
.style("opacity", "1");171
d3.selectAll(".mouse-per-line text")172
.style("opacity", "1");173
})174
.on('mousemove', () => {175
let mouse = d3.pointer(event);176
d3.select(".mouse-line")177
.attr("d", () => {178
let d = "M" + mouse[0] + "," + this.height;179
d += " " + mouse[0] + "," + 0;180
return d;181
});182
183
d3.selectAll(".mouse-per-line")184
.attr("transform", function (d, i) {185
let xDate = chart.xScale.invert(mouse[0]),186
bisect = d3.bisector(d => d.date).right,187
idx = bisect(d.values, xDate);188
189
let beginning = 0,190
end = lines[i].getTotalLength(),191
target = null;192
while (true) {193
let target = Math.floor((beginning + end) / 2);194
pos = lines[i].getPointAtLength(target); //issue here195
if ((target === end || target === beginning) && pos.x !== mouse[0]) {196
break;197
}198
if (pos.x > mouse[0]) {199
end = target;200
}201
else if (pos.x < mouse[0]) {202
beginning = target;203
}204
else break; //position found205
}206
207
d3.select(this).select('text')208
.text("$" + chart.yScale.invert(pos.y).toFixed(2))209
return "translate(" + mouse[0] + "," + pos.y + ")";210
})211
.style('font-family', 'Helvetica')212
.style('font-size', '11px')213
.style('letter-spacing', '1px')214
.style('text-transform', 'uppercase');215
});216
}217
218
setColor(newColor) {219
this.plot.select('.line')220
.style('stroke', newColor);221
222
this.lineColor = newColor;223
}224
225
setData(data) {226
this.data = data;227
228
this.draw();229
}230
}231
232
const chart = new Chart({ element: document.querySelector('#graph') });233
234
const data = d3.csvParse(`Date,AAPL,SMA_AAPL,TSLA,SMA_TSLA235
2018-12-31,38.33848571777344,,66.55999755859375,236
2019-01-02,38.382225036621094,,62.02399826049805,237
2019-01-03,34.55907440185547,,60.071998596191406,238
2019-01-04,36.03437805175781,,63.53799819946289,239
2019-01-07,35.95417022705078,,66.99199676513672,240
2019-01-08,36.63956832885742,,67.06999969482422,241
2019-01-09,37.26177215576172,,67.70600128173828,242
2019-01-10,37.380863189697266,,68.99400329589844,243
2019-01-11,37.013858795166016,,69.4520034790039,244
2019-01-14,36.4572868347168,,66.87999725341797,245
2019-01-15,37.20343780517578,,68.88600158691406,246
2019-01-16,37.657936096191406,,69.20999908447266,247
2019-01-17,37.88154602050781,,69.46199798583984,248
2019-01-18,38.11487579345703,,60.45199966430664,249
2019-01-22,37.259342193603516,,59.784000396728516,250
2019-01-23,37.410030364990234,,57.518001556396484,251
2019-01-24,37.113521575927734,,58.301998138427734,252
2019-01-25,38.34333801269531,,59.40800094604492,253
2019-01-28,37.988487243652344,,59.2760009765625,254
2019-01-29,37.59474182128906,,59.492000579833984,255
2019-01-30,40.16377258300781,,61.75400161743164,256
2019-01-31,40.453006744384766,,61.40399932861328,257
2019-02-01,40.472450256347656,,62.44200134277344,258
2019-02-04,41.622066497802734,,62.577999114990234,259
2019-02-05,42.33420181274414,,64.2699966430664,260
2019-02-06,42.34878158569336,,63.444000244140625,261
2019-02-07,41.546722412109375,,61.50199890136719,262
2019-02-08,41.59553909301758,,61.15999984741211,263
2019-02-11,41.35633087158203,,62.56800079345703,264
2019-02-12,41.71269989013672,38.606483713785806,62.36199951171875,63.48539975484212265
2019-02-13,41.539398193359375,38.71318079630534,61.63399887084961,63.32119979858398266
2019-02-14,41.69073486328125,38.823464457194014,60.75400161743164,63.278866577148435267
2019-02-15,41.59797286987305,39.05809440612793,61.57600021362305,63.32899996439616268
2019-02-19,41.72246551513672,39.247697321573895,61.12799835205078,63.24866663614909269
2019-02-20,41.990962982177734,39.44892374674479,60.512001037597656,63.032666778564455270
2019-02-21,41.75419616699219,39.619411341349284,58.24599838256836,62.738533401489256271
2019-02-22,42.22041702270508,39.78469950358073,58.94200134277344,62.44640007019043272
2019-02-25,42.5279655456543,39.95626958211263,59.75400161743164,62.13840001424153`, function (d) {273
function removeNaN(e, c) {274
if (e > 0) { return e; } else { return c; }275
}276
return {277
date: d3.timeParse("%Y-%m-%d")(d.Date),278
aapl: +d.AAPL,279
tsla: +d.TSLA,280
aapl_sma: removeNaN(+d.SMA_AAPL, +d.AAPL),281
tsla_sma: removeNaN(+d.SMA_TSLA, +d.TSLA)282
};283
});284
285
chart.setData(data);286
</script>287
</body>288
289
</html>Instead of listing all of them, I’ve created a diff file. Download and check. Left side is the original code.