title: D3.js line chart - can't see line close to the axis
body: <p>I am having an issue with my d3.js line chart. indeed, the line series can't be seen when the value is close to the axis. you can see the problem on the attached picture.</p>
  <p><a href="https://i.stack.imgur.com/laX2C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/laX2C.png" alt="Screenshot" /></a></p>
  <p>here is the code, sorry it is a bit long but I don't really know where the issue could be.</p>
  <p>I don't think that the problem is in any css and more in the SVG itself.</p>
  <pre><code>function realTimeLineChart() {
    // console.log(interval);
    var margin = { top: 50, right: 60, bottom: 50, left: 60 },
      width = maxWidth,
      height = 400,
      duration = interval;
    color = d3.schemeCategory10;
    strtime = new Date().getTime();
    var label_table = {
      P: &quot;x&quot;,
      E: &quot;y&quot;,
    };
  
    var TimeFormatLive = function (d) {
      //CODE FOR FORMATTING THE X-AXIS LABELS
    };
  
    function chart(selection) {
      // Based on https://bl.ocks.org/mbostock/3884955
      selection.each(function (data) {
        data = [&quot;P&quot;, &quot;E&quot;].map(function (c) {
          return {
            label: c,
            values: data.map(function (d) {
              return { time: +d.time, value: d[label_table[c]] };
            }),
          };
        });
  
        var t = d3.transition().duration(duration).ease(d3.easeLinear),
          x = d3
            .scaleLinear()
            .rangeRound([0, width - margin.left - margin.right]),
          yp = d3
            .scaleLinear()
            .rangeRound([height - margin.top - margin.bottom, 0]),
          ye = d3
            .scaleLinear()
            .rangeRound([height - margin.top - margin.bottom, 0]),
          z = d3.scaleOrdinal(color);
  
        var xMax = new Date().getTime() - strtime;
        var xMin = xMax - 1 * 60 * 1000;
        x.domain([xMin, xMax]);
        yp.domain([0, MaxP]).nice();
        ye.domain([0, MaxElong]).nice();
  
        var line = d3
          .line()
          .curve(d3.curveBasis)
          .x(function (d) {
            return x(d.time);
          })
          .y(function (d) {
            return yp(d.value);
          });
        var line2 = d3
          .line()
          .curve(d3.curveBasis)
          .x(function (d) {
            return x(d.time);
          })
          .y(function (d) {
            return ye(d.value);
          });
  
        var svg = d3.select(this).selectAll(&quot;svg&quot;).data([data]);
  
        var gEnter = svg.enter().append(&quot;svg&quot;).append(&quot;g&quot;);
        let xPixel = width / 2 - margin.top;
        
  
        gEnter.append(&quot;g&quot;).attr(&quot;class&quot;, &quot;axis x&quot;);
        gEnter.append(&quot;g&quot;).attr(&quot;class&quot;, &quot;axis yp&quot;);
        gEnter.append(&quot;g&quot;).attr(&quot;class&quot;, &quot;axis ye&quot;);
        gEnter
          .append(&quot;defs&quot;)
          .append(&quot;clipPath&quot;)
          .attr(&quot;id&quot;, &quot;clip&quot;)
          .append(&quot;rect&quot;)
          .attr(&quot;width&quot;, width - margin.left)
          .attr(&quot;height&quot;, height - margin.top);
        gEnter
          .append(&quot;g&quot;)
          .attr(&quot;class&quot;, &quot;lines&quot;)
          .attr(&quot;clip-path&quot;, &quot;url(#clip)&quot;)
          .selectAll(&quot;.data&quot;)
          .data(data)
          .enter()
          .append(&quot;path&quot;)
          .attr(&quot;class&quot;, &quot;data&quot;);
  
  
  ...
  
        g.selectAll(&quot;g path.data&quot;)
          .data(data)
          .style(&quot;stroke&quot;, function (d) {
            return z(d.label);
          })
          .style(&quot;stroke-width&quot;, 1)
          .style(&quot;fill&quot;, &quot;none&quot;)
          .transition()
          .duration(duration)
          .ease(d3.easeLinear)
          .on(&quot;start&quot;, tick);
          })
  
  ...
  
        // For transitions https://bl.ocks.org/mbostock/1642874
        function tick() {
          //console.log(data);
  
          d3.select(this)
            .attr(&quot;d&quot;, function (d) {
              //console.log(d)
  
              if (d.label == &quot;P&quot;) {
                //console.log(d.label)
                return line(d.values);
              } else if (d.label == &quot;E&quot;) {
                //console.log(d.label)
                return line2(d.values);
              } 
            })
            .attr(&quot;transform&quot;, null);
  
          var xMinLess = new Date(new Date(xMin).getTime() - duration);
          d3.active(this)
            .attr(&quot;transform&quot;, &quot;translate(&quot; + x(xMinLess) + &quot;,0)&quot;)
            .transition()
            .on(&quot;start&quot;, tick);
        }
      });
    }
  
    ....
  
    return chart;
  }
  </code></pre>