SOURCE

fetch('http://10.25.25.129:38080/app/mock/16/test1')
    .then(response => response.json())
    .then(data => {
        console.log(data.data);
        debugger;
        console.log(parseData(data.data));
        document.body.appendChild(drawChart(parseData(data.data)));
    });

const parseData = (data) => {
    const arr = [];
    for (let i of data) {
        arr.push({
            date: new Date(i.date),
            value: i.value,
        })
    }
    return arr;
}

const drawChart = data => {
    const width = 500;
    const height = 500;
    const margin = ({top: 20, right: 30, bottom: 30, left: 40})
    const xAxis = (g) => g
                .attr('transform', `translate(0, ${height - margin.bottom})`)
                .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
    const yAxis = (g) => g
                .attr('transform', `translate(${margin.left}, 0)`)
                .call(d3.axisLeft(y))

    const x = d3.scaleTime()
                .domain(d3.extent(data, d => d.date.getTime()))
                .range([margin.left, width - margin.right]);

    const y = d3.scaleLinear()
                .domain([0, d3.max(data, d => d.value)]).nice()
                .range([height - margin.bottom, margin.top]);

    const line = d3.line()
                .defined(d => !isNaN(d.value))
                .x(d => x(d.date))
                .y(d => y(d.value));

    const transition = d3.transition().duration(750).ease(d3.easeLinear);

    const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);

    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);

    svg.append('polygon').attr(
        'points', '40,470 40,450 460,450 470,470')
        .attr("fill", "rgba(255, 255, 0)")
        .attr("stroke", "red")
        .attr("stroke-width", 1.5);

    svg.append('polygon').attr(
        'points', '40,450 40,430 450,430 460,450')
        .attr("fill", "rgba(255, 255, 0)")
        .attr("stroke", "red")
        .attr("stroke-width", 1.5);
        
    svg.append('polygon').attr(
        'points', '40,430 40,410 440,410 450,430')
        .attr("fill", "rgba(255, 255, 0)")
        .attr("stroke", "red")
        .attr("stroke-width", 1.5);

    svg.append('polygon').attr(
        'points', '40,410 40,390 300,390 300,410')
        .attr("fill", "rgba(255, 255, 0)")
        .attr("stroke", "red")
        .attr("stroke-width", 1.5);

    svg.append('polygon').attr(
        'points', '300,410 300,390 430,390 440,410')
        .attr("fill", "rgba(255, 255, 0)")
        .attr("stroke", "red")
        .attr("stroke-width", 1.5);
    
    svg.append('polygon').attr(
        'points', '350,390 350,20 400,20 430,390')
        .attr("fill", "rgba(255, 255, 0)")
        .attr("stroke", "red")
        .attr("stroke-width", 1.5);

    svg.append('path')
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1.5)
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("d", line)
        .transition(transition);
    
    const lineData = [ { "x": 140,   "y": 45},  { "x": 180,  "y": 60},
                 { "x": 190,  "y": 70}, { "x": 195,  "y": 80},
                 { "x": 190,  "y": 95},  { "x": 130, "y": 100}];
    const lineFunction = d3.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; }).curve(d3.curveNatural)

    svg.append("path").attr("d", lineFunction(lineData))
                            .attr('stroke-dasharray', '5,2')
                            .attr("stroke", "blue")
                            .attr("stroke-width", 1)
                            .attr("fill", "none")
                            .transition(transition);

    svg.selectAll("myCircles")
      .data(lineData)
      .enter()
      .append("circle")
        .attr("fill", "red")
        .attr("stroke", "none")
        .attr("cx", function(d) { return d.x })
        .attr("cy", function(d) { return d.y })
        .attr("r", 3)

    return svg.node();
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- <svg></svg> -->