D3 Scatterplot: cannot set yvalue attribute as Date object

Hello everyone. This is my first post here.
I have a question.

In the D3 Scatterplot project, one of the tests asks us to set the “data-yvalue” attribute as a javascript Date object.

However, when I tried to do that, the Date object was converted to a string. And it will not match corresponding value on y-axis because the y-scale is a time scale.

After some search on the net, I discovered that data attributes can only be string.

Is there a way to get around that?

Post a Codepen with your code.

I think the requirement is just worded in an odd way. I assume it means the actual date values you can use as strings. Not the object.


As you already know, data-* attribute values are strings. They can not contain objects. In the case of a date object, it will convert to a string without issues but other object types would give you the [object type] conversion.

document.querySelector('p').dataset.name = new Set([1, 2, 3, 4, 5]);
// <p data-name="[object Set]">test</p>

Sorry for the late reply, here’s my pen:
https://codepen.io/chan64/pen/QWYGzOz
As the y-axis is a time scale, the values on it are Date objects. They won’t match any strings.
Maybe I should change the y-scale to linear, using the number of seconds as values? But then other tests might fail.

Kindly update your code as mentioned below .

data = json.map((d) => {
let timeFormat = d.Time.split(‘:’)
return {
Name: d.Name,
Year: d.Year,
Doping: d.Doping,
Time: new Date(1970, 0, 1, 0, timeFormat[0], timeFormat[1])
};
});

Explanation : It creates a new Date object using the new Date constructor, setting the hours and minutes to the values obtained from the timeFormat array. The date is set to January 1, 1970, which serves as a base date for the time calculations.

Yes. It works. Thank you very much.
But I still don’t get it. The problem is somehow related to the base date? Does that mean “merely” matching minutes and seconds is not enough?