d3js dont drawing path - json

Question

Axises drawn well done, but path is invisible.And no error messages in the console. Please help understand where is the problem.
function Chart(id, data) {
var chartData = JSON.parse(data);
const height = 800;
const width = 900;
var svg = d3.select(id)
.append("svg")
.attr("width", width)
.attr("height", height);
var parseDate = d3.timeParse("%d.%m.%Y %H:%M:%S");
var lineLvl = d3.line()
.x(function (d) {
return Date.parse(parseDate(d.timeData));
})
.y(function (d)
{
return d.lvlData;
});
var xscale =
d3.scaleTime()
.domain([Date.parse(parseDate(chartData[0].timeData))-60000,
Date.parse(parseDate(chartData[chartData.length - 1].timeData)) + 60000])
.range([0, width*0.95]);
var yscale = d3.scaleLinear()
.domain([0, d3.max(chartData, function (d) { return d.lvlData*1.1; } )] )
.range([height / 2, 0]);
var x_axis = d3.axisBottom().scale(xscale)
.tickFormat(d3.timeFormat("%H:%M"));
svg.append("path")
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none")
.attr("d", lineLvl(chartData));
var y_axis = d3.axisLeft().scale(yscale);
svg.append("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);
var xAxisTranslate = height / 2 + 10;
svg.append("g")
.attr("transform", "translate(50, " + xAxisTranslate + ")")
.call(x_axis);
}
Data represented by array of structures like this
{"timeData":"17.07.2020 14:38:10","lvlData":"146575","temperatureData":"24","volumeData":"6155"}

Answer 1

You need to apply the scales to your data when plotting it:
var lineLvl = d3.line()
.x(function (d) {
return xscale(Date.parse(parseDate(d.timeData))); // run the x value through the x scale
})
.y(function (d)
{
return yscale(d.lvlData); // run the y value through the y scale
});
The reason you see no error is because the line is drawn, but with unscaled values it is drawn a long ways off the SVG. If you inspect the SVG, you'll see the path, it's drawn, just that its coordinates reflect the raw data, not the scaled data.