score:0

Accepted answer

Got it - the axis ticks were disappearing off the left edge of the window - fixed that with a transform/translate:

    // Add the Y Axis
    svg.append("g")
      .attr("transform", "translate(40 ,10)")
      .call(d3.axisLeft(y));

...with a similar translation of the x axis and path to match.

Also, the axis scale now appeared with an extent of 0 to 1.0, as it wasn't being passed out of the file read loop since it was an asynchronous operation. Bringing the svg.append's into the data read loop restored my "normal" units to the axis.

score:1

Whats happening here is your Y axis ticks are getting hidden because they're not in the viewport. What you need to do is put all the elements in your svg in a <g> wrapper and translate it by left and top margins.

Here's a fiddle

var chartDiv = document.getElementById("chart");
var svg = d3.select(chartDiv).append("svg");
var g = svg.append('g');

function render() {
  $('svg').empty();


  // Extract the width and height that was computed by CSS.
  var width = $('#chart').width();
  var height = $('#chart').height();

  // Use the extracted size to set the size of an SVG element.
  svg
    .attr("width", width)
    .attr("height", height);

  // set the dimensions and margins of the graph
  var margin = {
    top: 20,
    right: 20,
    bottom: 50,
    left: 40
  };
  width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

  // parse the date time
  var parseTime = d3.timeParse("%m/%d %H:%M");

  // set the ranges
  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  // define the line
  var valueline = d3.line()
    .x(function(d) {
      return x(d.time);
    })
    .y(function(d) {
      return y(d.solar);
    });

  // Get the data
  var data = [{
    'time': '11/30 04:55',
    'solar': -1.1
  }, {
    'time': '11/30 05:00',
    'solar': -1.1
  }, {
    'time': '11/30 05:05',
    'solar': -1.5
  }, {
    'time': '11/30 05:10',
    'solar': -2
  }, {
    'time': '11/30 05:15',
    'solar': 1
  }]
  // format the data
  data.forEach(function(d) {
    d.time = parseTime(d.time);
    d.solar = +d.solar;
  });

  console.log(data)

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) {
    return d.time;
  }));
  var yExtent = d3.extent(data, function(d) {
    return d.solar;
  })
  y.domain(yExtent);

  g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  // Add the valueline path.
  g.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", valueline);

  // Add the X Axis
  g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x)
      .tickFormat(d3.timeFormat("%m/%d %H:%M  ")))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-45)");

  // Add the Y Axis
  g.append("g")
    .call(d3.axisLeft(y));

}

//      d3.select("svg").remove();
//      svg.remove();
//      d3.selectAll("g > *").remove()
//        d3.selectAll("chartDiv.path.line").remove();
//      d3.select("path.line").remove();
render();

// Redraw based on the new size whenever the browser window is resized.
window.addEventListener("resize", render);
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>

Happy coding :)


Related Query