Thanks, many thanks for your answer.
You touched a good point: on mouseover
is slow, it is much better on mouseenter
.
Well, I changed the code this way:
.on('mouseenter', function (d) {
d3.select(this)
.attr('stroke', '#d53e4f')
.attr('stroke-width', '2px')
.append('title')
.attr('id', 'tooltip')
.attr('data-year', d => d.year)
.text(d => `${months[d.month][1]} ${d.year}\n${(d.temp).toPrecision(3)}°`)
})
.on('mouseleave', function(d) {
d3.select(this)
.attr('stroke', 'none')
.attr('stroke-width', '0')
.selectAll('#tooltip')
.remove()
})
I used d3.select(this)
because it seems to be a standard technique with such situations (also this source and this source and many more). The tests don’t pass.
I don’t know any techniques for transforming a D3 element without selecting it. If it exists, it seems to me that the FCC course on d3 does not mention it.
It seems to me that my project respects all the specifics of the problem: the tooltip is visible and has its own id.
It is very tiring and frustrating to have to look for an error without even knowing if the error really exists or is it just a “stylistic” claim.
PLEASE, if anyone knows please tell me explicitly what the real hidden specification of the problem is, so that I can implement it without being forced to chase ghosts.
(I read that the test assert is as follows
var t = this, a = arguments;
return new Promise (
(function (n, o) {
var s = e.apply (t, a);
function i (e) {r (s, n, o, i, l , "next", e)}
function l (e) {r (s, n, o, i, l, "throw", e)} i (void 0)}
)
)
I don’t know how to read it. What does it mean?)