Q:

Remove labels on the X and Y Axis and remove last gridline on the X Axis

HTML:
<div id="line-graph"></div>

CSS:
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.dot {
  fill: lightblue;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.axis {
  fill: yellow;
  font-family: Times New Roman;
  font-size: 24px;
  font-color: red;
}

.axis line {
  stroke: gray;
}

.axis path{
  stroke: lime;
}

.axis text {
  fill: lightblue;
}

.grid line {
  stroke: lightgrey;
}

.grid path {
  stroke-width: 0;
}

JS:
'use strict';

const data = d3.range(40).map((i) => {
    if (i % 5) {
        return {
            x: (i / 39),
            y: ((Math.sin(i / 3) + 2) / 4)
        };
    }
    return null;
});

const margin = { 
    top: 40, 
    right: 40, 
    bottom: 40, 
    left: 40 
};
const width = (960 - margin.left - margin.right);
const height = (500 - margin.top - margin.bottom);

const x = d3.scaleLinear().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);

const line = d3.line()
    .defined(d => d)
    .x(d => x(d.x))
    .y(d => y(d.y));

const svg = d3.select('#line-graph')
    .append('svg:svg')
    .datum(data)
    .attr('width', (width + margin.left + margin.right))
    .attr('height', (height + margin.top + margin.bottom))
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// X-Axis line
svg.append('g') // g for group
    .attr('class', 'axis') // CSS class
    .attr('transform', 'translate(0,' + height + ')')
    .call(d3.axisBottom(x));

// X-Axis gridlines
const customXAxis = d3.axisBottom(x)
    .ticks(9) // How many gridlines
    .tickSize(-height)
    .tickFormat('');

// Add X-Axis gridlines
svg.append('g') 
    .attr('class', 'grid') // CSS class
    .attr('transform', 'translate(0,' + height + ')')
    .call(customXAxis);

// Y-Axis line
svg.append('g') // g for group
    .attr('class', 'axis') // CSS class
    .call(d3.axisLeft(y));

// Grapth line
svg.append('path')
    .attr('class', 'line') // CSS class
    .attr('d', line);

// Graph line dots
svg.selectAll('.dot')
    .data(data.filter(d => d))
    .enter().append('circle')
    .attr('class', 'dot') // CSS class
    .attr('cx', line.x())
    .attr('cy', line.y())
    .attr('r', 3.5);

Currently:

Would like to have:

As you see some of the X and Y Axis labels are gone, but the line is still the same length. The last gridline on the X Axis is gone. 
I would also like to extend the yellow area on the X Axis downwards (making the height higher) and on the Y Axis Leftwards (making the width longer), it was a pain to write this in paint so I skipped showing this.

A:

So I finally fixed it. Took some time and looked at some weird examples but figured it out. I removed the labels at the bottom, but that's easy to adjust if you look at the code. https://jsfiddle.net/Lt83y1ph/
JS:
'use strict';

const data = d3.range(40).map((i) => {
    if (i % 5) {
        return {
            x: (i / 39),
            y: ((Math.sin(i / 3) + 2) / 4)
        };
    }
    return null;
});

const margin = { 
    top: 40, 
    right: 40, 
    bottom: 40, 
    left: 60 
};
const width = (960 - margin.left - margin.right);
const height = (500 - margin.top - margin.bottom);

const x = d3.scaleLinear().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);

const line = d3.line()
    .defined(d => d)
    .x(d => x(d.x))
    .y(d => y(d.y));

const svg = d3.select('#line-graph')
    .append('svg:svg')
    .datum(data)
    .attr('width', (width + margin.left + margin.right))
    .attr('height', (height + margin.top + margin.bottom))
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// X-Axis
const xAxis = d3.axisBottom(x)
    .ticks(9) // How many gridlines
    .tickSizeInner(-height) // Ticks in between the outer ticks
    .tickSizeOuter(0) // Ticks on both outer sides
    .tickFormat(''); // Removes tick labels
// Custom X-Axis function
function customXAxis(g) {
    g.call(xAxis);
}
// Add X-Axis
svg.append('g') 
    .attr('class', 'axis') // CSS class
    .attr('transform', 'translate(0,' + height + ')')
    .call(customXAxis);

// Y-Axis
const yAxis = d3.axisLeft(y)
    .ticks(9) // How many gridlines
    .tickSizeInner(10) // Ticks in between the outer ticks
    .tickSizeOuter(0) // Ticks on both outer sides
    .tickPadding(10); // Spacing between ticks and labels
// Custom Y-Axis function
function customYAxis(g) {
    g.call(yAxis);
    g.select('.domain').remove(); // Removes the initial axis line
    g.select('.tick:nth-of-type(1)').attr('display', 'none');
    g.select('.tick:nth-of-type(2)').attr('display', 'none');
    g.select('.tick:nth-last-of-type(1)').attr('display', 'none');
    g.select('.tick:nth-last-of-type(2)').attr('display', 'none');
}
// Add Y-Axis
svg.append('g') 
    .attr('class', 'axis') // CSS class
    .call(customYAxis);

// Grapth line
svg.append('path')
    .attr('class', 'line') // CSS class
    .attr('d', line);

// Graph line dots
svg.selectAll('.dot')
    .data(data.filter(d => d))
    .enter().append('circle')
    .attr('class', 'dot') // CSS class
    .attr('cx', line.x())
    .attr('cy', line.y())
    .attr('r', 3.5);

CSS:
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.dot {
  fill: lightblue;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.axis {
  fill: black;
  font-family: Times New Roman;
  font-size: 24px;
}

.axis line {
  stroke: lightgrey;
}

.axis text {
  fill: lightblue;
}

