d3 line chart not displaying correctly


I’ve been trying to display this dataset:

[{
  "time": 0.4,
  "startvalue": 1,
  "endvalue": 0,
  "active": 1
}, {
  "time": 0.7,
  "startvalue": 1,
  "endvalue": 1,
  "active": 0
}, {
  "time": 0.8,
  "startvalue": 2,
  "endvalue": 1,
  "active": 1
}, {
  "time": 1.2,
  "startvalue": 3,
  "endvalue": 1,
  "active": 2
}, {
  "time": 1.3,
  "startvalue": 4,
  "endvalue": 1,
  "active": 3
}, {
  "time": 1.35,
  "startvalue": 5,
  "endvalue": 1,
  "active": 4
}, {
  "time": 1.4,
  "startvalue": 5,
  "endvalue": 2,
  "active": 3
}, {
  "time": 1.5,
  "startvalue": 6,
  "endvalue": 3,
  "active": 3
}, {
  "time": 1.7,
  "startvalue": 7,
  "endvalue": 4,
  "active": 3
}, {
  "time": 1.9,
  "startvalue": 8,
  "endvalue": 4,
  "active": 4
}, {
  "time": 2,
  "startvalue": 9,
  "endvalue": 4,
  "active": 5
}, {
  "time": 2.2,
  "startvalue": 10,
  "endvalue": 4,
  "active": 6
}, {
  "time": 2.5,
  "startvalue": 10,
  "endvalue": 5,
  "active": 5
}, {
  "time": 2.8,
  "startvalue": 11,
  "endvalue": 5,
  "active": 6
}, {
  "time": 2.9,
  "startvalue": 11,
  "endvalue": 6,
  "active": 5
}, {
  "time": 3,
  "startvalue": 12,
  "endvalue": 8,
  "active": 4
}, {
  "time": 3.1,
  "startvalue": 14,
  "endvalue": 8,
  "active": 6
}, {
  "time": 3.15,
  "startvalue": 16,
  "endvalue": 8,
  "active": 8
}, {
  "time": 3.2,
  "startvalue": 17,
  "endvalue": 8,
  "active": 9
}, {
  "time": 3.25,
  "startvalue": 18,
  "endvalue": 9,
  "active": 9
}, {
  "time": 3.3,
  "startvalue": 19,
  "endvalue": 11,
  "active": 8
}, {
  "time": 3.4,
  "startvalue": 21,
  "endvalue": 11,
  "active": 10
}, {
  "time": 3.45,
  "startvalue": 21,
  "endvalue": 12,
  "active": 9
}, {
  "time": 3.5,
  "startvalue": 21,
  "endvalue": 13,
  "active": 8
}, {
  "time": 3.6,
  "startvalue": 22,
  "endvalue": 13,
  "active": 9
}, {
  "time": 3.7,
  "startvalue": 22,
  "endvalue": 15,
  "active": 7
}, {
  "time": 3.75,
  "startvalue": 22,
  "endvalue": 16,
  "active": 6
}, {
  "time": 3.8,
  "startvalue": 22,
  "endvalue": 17,
  "active": 5
}, {
  "time": 3.9,
  "startvalue": 22,
  "endvalue": 18,
  "active": 4
}, {
  "time": 4,
  "startvalue": 22,
  "endvalue": 21,
  "active": 1
}, {
  "time": 4.1,
  "startvalue": 23,
  "endvalue": 21,
  "active": 2
}, {
  "time": 4.9,
  "startvalue": 23,
  "endvalue": 22,
  "active": 1
}, {
  "time": 5,
  "startvalue": 24,
  "endvalue": 22,
  "active": 2
}, {
  "time": 5.1,
  "startvalue": 26,
  "endvalue": 22,
  "active": 4
}, {
  "time": 5.2,
  "startvalue": 28,
  "endvalue": 22,
  "active": 6
}, {
  "time": 5.25,
  "startvalue": 28,
  "endvalue": 23,
  "active": 5
}, {
  "time": 5.3,
  "startvalue": 28,
  "endvalue": 24,
  "active": 4
}, {
  "time": 5.4,
  "startvalue": 28,
  "endvalue": 25,
  "active": 3
}, {
  "time": 5.6,
  "startvalue": 28,
  "endvalue": 26,
  "active": 2
}, {
  "time": 5.7,
  "startvalue": 28,
  "endvalue": 27,
  "active": 1
}, {
  "time": 6,
  "startvalue": 29,
  "endvalue": 28,
  "active": 1
}, {
  "time": 6.3,
  "startvalue": 29,
  "endvalue": 29,
  "active": 0
}]

as a line Chart. I have been trying for two days now and run out of ideas of why it is not displaying the line correctly.

LineChart.prototype.render = function(data, selectedNode, colorDomain) {
  let vis = this;
  this.colorScale.domain(colorDomain);

  if (selectedNode != "All") {
    let xScale = d3.scaleLinear()
      .domain(d3.extent(data, d => d.time))
      .range([0, this.innerWidth]);

    //console.log(d3.max(data, d=> d.startvalue));
    //console.log(JSON.stringify(data));
    let yScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.active)])
      .range([0, this.innerHeight]);
    //

    this.yAxisG.call(d3.axisLeft(yScale));

    let xAxis = d3.axisBottom(xScale);

    this.xAxisG.call(xAxis)
      .attr("transform", `translate(0,${this.innerHeight})`);

    let xValue = d => d.time;
    let yValue = d => d.startvalue;

    let lineGen = d3.line()
      .x(function(d) {
        return xScale(d.time)
      })
      .y(function(d) {
        return xScale(d.active)
      });

    let lines = this.g.selectAll(".line");

    lines.remove();

    //let linesEnter = lines.enter();
    this.g.append("path").datum(data).attr("class", "line")
      .attr("fill", "none")
      .attr("stroke", "#0F0")
      .attr("stroke-width", 1.5)
      .attr("d", lineGen)

  }


}

This is the result that i am getting: https://gyazo.com/0979e540e1fc78bd2c2eb6fd867fba17

I am not sure why this line is generating like this.

Source: JavaSript – Stack Overflow

September 4, 2021
Category : News
Tags: D3.js | html | javascript | linechart

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.