D3.js text element is not displaying the value of function

Question

I am trying to display certain values in my chart, although rather than the actual value being displayed, the function is. How can I display the actual return value of the function? The temperature displays well.

Furthermore, the \n doesn't work either. Is there any way that could be done?

An image of the output:

d3.select(this)
.select('text')
.text("Date: " + function(d){ return d.date;} +
      "\nTemperature: " + y.invert(pos.y).toFixed(2) + 
      "\nEvent: " + function(d){ return d.event;});

Answer 1

Here is the fixed code:

d3.select(this)
  .select('text')
  .text(d => `Date: ${d.date} \nTemperature: ${y.invert(pos.y).toFixed(2)}\nEvent: ${d.event}`);

I suppose there should be d.pos.y instead of pos.y, but it's how original code is written