Q:

d3.js area graph has a final line on the wrong side

I'm attempting to get my area chart to work using two arrays for the x and y-axes, with both scaled. My issue is that the final few lines of the path don't complete along the right and bottom sides of the graph, but rather go directly from the last y-value back to the origin.
Here is the code, a screenshot is attached below as well.

var dataArray = [243.1,246.3,250.1,260.3,266.2,272.9,279.5,280.7,275.4,271.7,273.3,271.0,281.2,
    290.7,308.5,320.3,336.4,344.5,351.8,356.6,360.2,361.4,368.1,381.2,388.5,392.3,
    391.7,386.5,385.9,386.7,391.6,400.3,413.8,422.2,430.9,437.8,440.5,446.8,452.0,
    461.3,470.6,472.8,480.3,475.7,468.4,472.8,486.7,500.4,511.1,524.2,525.2,529.3,
    543.3,542.7,546.0,541.1,545.9,557.4,568.2,581.6,595.2,602.6,609.6,613.1,622.7,
    631.8,645.0,654.8,671.1,680.8,692.8,698.4,719.2,732.4,750.2,773.1,797.3,807.2,
    820.8,834.9,846.0,851.1,866.6,883.2,911.1,936.3,952.3,970.1,995.4,1011.4,1032.0,
    1040.7,1053.5,1070.1,1088.5,1091.5,1137.8,1159.4,1180.3,1193.6,1233.8,1270.1,
    1293.8,1332.0,1380.7,1417.6,1436.8,1479.1,1494.7,1534.2,1563.4,1603.0,1619.6,
    1656.4,1713.8,1765.9,1824.5,1856.9,1890.5,1938.4,1992.5,2060.2,2122.4,2168.7,
    2208.7,2336.6,2398.9,2482.2,2531.6,2595.9,2670.4,2730.7,2796.5,2799.9,2860.0,
    2993.5,3131.8,3167.3,3261.2,3283.5,3273.8,3331.3,3367.1,3407.8,3480.3,3583.8,
    3692.3,3796.1,3912.8,4015.0,4087.4,4147.6,4237.0,4302.3,4394.6,4453.1,4516.3,
    4555.2,4619.6,4669.4,4736.2,4821.5,4900.5,5022.7,5090.6,5207.7,5299.5,5412.7,
    5527.4,5628.4,5711.6,5763.4,5890.8,5974.7,6029.5,6023.3,6054.9,6143.6,6218.4,
    6279.3,6380.8,6492.3,6586.5,6697.6,6748.2,6829.6,6904.2,7032.8,7136.3,7269.8,
    7352.3,7476.7,7545.3,7604.9,7706.5,7799.5,7893.1,8061.5,8159.0,8287.1,8402.1,
    8551.9,8691.8,8788.3,8889.7,8994.7,9146.5,9325.7,9447.1,9557.0,9712.3,9926.1,
    10031.0,10278.3,10357.4,10472.3,10508.1,10638.4,10639.5,10701.3,10834.4,10934.8,
    11037.1,11103.8,11230.1,11370.7,11625.1,11816.8,11988.4,12181.4,12367.7,12562.2,
    12813.7,12974.1,13205.4,13381.6,13648.9,13799.8,13908.5,14066.4,14233.2,14422.3,
    14569.7,14685.3,14668.4,14813.0,14843.0,14549.9,14383.9,14340.4,14384.1,14566.5,
    14681.1,14888.6,15057.7,15230.2,15238.4,15460.9,15587.1,15785.3,15973.9,16121.9,
    16227.9,16297.3,16475.4,16541.4,16749.3,16999.9,17025.2,17285.6,17569.4,17692.2,
    17783.6,17998.3,18141.9,18222.8,18281.6,18450.1,18675.3,18869.4,19007.3];

var dataYears = [1947.25,1947.5,1947.75,1948,1948.25,1948.5,1948.75,1949,1949.25,1949.5,1949.75,
    1950,1950.25,1950.5,1950.75,1951,1951.25,1951.5,1951.75,1952,1952.25,1952.5,
    1952.75,1953,1953.25,1953.5,1953.75,1954,1954.25,1954.5,1954.75,1955,1955.25,
    1955.5,1955.75,1956,1956.25,1956.5,1956.75,1957,1957.25,1957.5,1957.75,1958,
    1958.25,1958.5,1958.75,1959,1959.25,1959.5,1959.75,1960,1960.25,1960.5,1960.75,
    1961,1961.25,1961.5,1961.75,1962,1962.25,1962.5,1962.75,1963,1963.25,1963.5,
    1963.75,1964,1964.25,1964.5,1964.75,1965,1965.25,1965.5,1965.75,1966,1966.25,
    1966.5,1966.75,1967,1967.25,1967.5,1967.75,1968,1968.25,1968.5,1968.75,1969,
    1969.25,1969.5,1969.75,1970,1970.25,1970.5,1970.75,1971,1971.25,1971.5,1971.75,
    1972,1972.25,1972.5,1972.75,1973,1973.25,1973.5,1973.75,1974,1974.25,1974.5,
    1974.75,1975,1975.25,1975.5,1975.75,1976,1976.25,1976.5,1976.75,1977,1977.25,
    1977.5,1977.75,1978,1978.25,1978.5,1978.75,1979,1979.25,1979.5,1979.75,1980,
    1980.25,1980.5,1980.75,1981,1981.25,1981.5,1981.75,1982,1982.25,1982.5,1982.75,
    1983,1983.25,1983.5,1983.75,1984,1984.25,1984.5,1984.75,1985,1985.25,1985.5,
    1985.75,1986,1986.25,1986.5,1986.75,1987,1987.25,1987.5,1987.75,1988,1988.25,
    1988.5,1988.75,1989,1989.25,1989.5,1989.75,1990,1990.25,1990.5,1990.75,1991,
    1991.25,1991.5,1991.75,1992,1992.25,1992.5,1992.75,1993,1993.25,1993.5,1993.75,
    1994,1994.25,1994.5,1994.75,1995,1995.25,1995.5,1995.75,1996,1996.25,1996.5,
    1996.75,1997,1997.25,1997.5,1997.75,1998,1998.25,1998.5,1998.75,1999,1999.25,
    1999.5,1999.75,2000,2000.25,2000.5,2000.75,2001,2001.25,2001.5,2001.75,2002,
    2002.25,2002.5,2002.75,2003,2003.25,2003.5,2003.75,2004,2004.25,2004.5,2004.75,
    2005,2005.25,2005.5,2005.75,2006,2006.25,2006.5,2006.75,2007,2007.25,2007.5,
    2007.75,2008,2008.25,2008.5,2008.75,2009,2009.25,2009.5,2009.75,2010,2010.25,
    2010.5,2010.75,2011,2011.25,2011.5,2011.75,2012,2012.25,2012.5,2012.75,2013,
    2013.25,2013.5,2013.75,2014,2014.25,2014.5,2014.75,2015,2015.25,2015.5,2015.75,
    2016,2016.25,2016.5,2016.75,2017];

var height = 600;
var width = 800;

var y = d3.scaleLinear()
 .domain([0,d3.max(dataArray)])
 .range([height, 0]);

var x = d3.scaleLinear()
 .domain(d3.extent(dataYears))
 .range([0,width]);

var margin = {left:100,right:50,top:40,bottom:0}

var yAxis = d3.axisLeft(y).ticks(4).tickPadding(10).tickSize(10);
var xAxis = d3.axisBottom(x);

var area = d3.area()
    .x(function(d,i){return x(dataYears[i]);})
    .y0(height)
    .y1(function(d){return y(d);});

var svg = d3.select("body").append("svg").attr("height",height).attr("width",width)
var chartGroup = svg.append("g").attr("class","graph").attr("transform","translate("+margin.left+","+margin.top+")");

chartGroup.append("path").attr("d",area(dataArray));
chartGroup.append("g").attr("class","axis y").call(yAxis);
chartGroup.append("g").attr("class","axis x").attr("transform","translate(0,"+height+")").call(xAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

A:

You have the code down, there is just an issue with your data arrays.
The years array is lacking one value (length 280) compared with the data array (length 281). If these are the same length,  you'll get the desired result. I've added a new year value to the year array (2017.25), and it displays as intended. See snippet below:

var dataArray = [243.1,246.3,250.1,260.3,266.2,272.9,279.5,280.7,275.4,271.7,273.3,271.0,281.2,
    290.7,308.5,320.3,336.4,344.5,351.8,356.6,360.2,361.4,368.1,381.2,388.5,392.3,
    391.7,386.5,385.9,386.7,391.6,400.3,413.8,422.2,430.9,437.8,440.5,446.8,452.0,
    461.3,470.6,472.8,480.3,475.7,468.4,472.8,486.7,500.4,511.1,524.2,525.2,529.3,
    543.3,542.7,546.0,541.1,545.9,557.4,568.2,581.6,595.2,602.6,609.6,613.1,622.7,
    631.8,645.0,654.8,671.1,680.8,692.8,698.4,719.2,732.4,750.2,773.1,797.3,807.2,
    820.8,834.9,846.0,851.1,866.6,883.2,911.1,936.3,952.3,970.1,995.4,1011.4,1032.0,
    1040.7,1053.5,1070.1,1088.5,1091.5,1137.8,1159.4,1180.3,1193.6,1233.8,1270.1,
    1293.8,1332.0,1380.7,1417.6,1436.8,1479.1,1494.7,1534.2,1563.4,1603.0,1619.6,
    1656.4,1713.8,1765.9,1824.5,1856.9,1890.5,1938.4,1992.5,2060.2,2122.4,2168.7,
    2208.7,2336.6,2398.9,2482.2,2531.6,2595.9,2670.4,2730.7,2796.5,2799.9,2860.0,
    2993.5,3131.8,3167.3,3261.2,3283.5,3273.8,3331.3,3367.1,3407.8,3480.3,3583.8,
    3692.3,3796.1,3912.8,4015.0,4087.4,4147.6,4237.0,4302.3,4394.6,4453.1,4516.3,
    4555.2,4619.6,4669.4,4736.2,4821.5,4900.5,5022.7,5090.6,5207.7,5299.5,5412.7,
    5527.4,5628.4,5711.6,5763.4,5890.8,5974.7,6029.5,6023.3,6054.9,6143.6,6218.4,
    6279.3,6380.8,6492.3,6586.5,6697.6,6748.2,6829.6,6904.2,7032.8,7136.3,7269.8,
    7352.3,7476.7,7545.3,7604.9,7706.5,7799.5,7893.1,8061.5,8159.0,8287.1,8402.1,
    8551.9,8691.8,8788.3,8889.7,8994.7,9146.5,9325.7,9447.1,9557.0,9712.3,9926.1,
    10031.0,10278.3,10357.4,10472.3,10508.1,10638.4,10639.5,10701.3,10834.4,10934.8,
    11037.1,11103.8,11230.1,11370.7,11625.1,11816.8,11988.4,12181.4,12367.7,12562.2,
    12813.7,12974.1,13205.4,13381.6,13648.9,13799.8,13908.5,14066.4,14233.2,14422.3,
    14569.7,14685.3,14668.4,14813.0,14843.0,14549.9,14383.9,14340.4,14384.1,14566.5,
    14681.1,14888.6,15057.7,15230.2,15238.4,15460.9,15587.1,15785.3,15973.9,16121.9,
    16227.9,16297.3,16475.4,16541.4,16749.3,16999.9,17025.2,17285.6,17569.4,17692.2,
    17783.6,17998.3,18141.9,18222.8,18281.6,18450.1,18675.3,18869.4,19007.3];

var dataYears = [1947.25,1947.5,1947.75,1948,1948.25,1948.5,1948.75,1949,1949.25,1949.5,1949.75,
    1950,1950.25,1950.5,1950.75,1951,1951.25,1951.5,1951.75,1952,1952.25,1952.5,
    1952.75,1953,1953.25,1953.5,1953.75,1954,1954.25,1954.5,1954.75,1955,1955.25,
    1955.5,1955.75,1956,1956.25,1956.5,1956.75,1957,1957.25,1957.5,1957.75,1958,
    1958.25,1958.5,1958.75,1959,1959.25,1959.5,1959.75,1960,1960.25,1960.5,1960.75,
    1961,1961.25,1961.5,1961.75,1962,1962.25,1962.5,1962.75,1963,1963.25,1963.5,
    1963.75,1964,1964.25,1964.5,1964.75,1965,1965.25,1965.5,1965.75,1966,1966.25,
    1966.5,1966.75,1967,1967.25,1967.5,1967.75,1968,1968.25,1968.5,1968.75,1969,
    1969.25,1969.5,1969.75,1970,1970.25,1970.5,1970.75,1971,1971.25,1971.5,1971.75,
    1972,1972.25,1972.5,1972.75,1973,1973.25,1973.5,1973.75,1974,1974.25,1974.5,
    1974.75,1975,1975.25,1975.5,1975.75,1976,1976.25,1976.5,1976.75,1977,1977.25,
    1977.5,1977.75,1978,1978.25,1978.5,1978.75,1979,1979.25,1979.5,1979.75,1980,
    1980.25,1980.5,1980.75,1981,1981.25,1981.5,1981.75,1982,1982.25,1982.5,1982.75,
    1983,1983.25,1983.5,1983.75,1984,1984.25,1984.5,1984.75,1985,1985.25,1985.5,
    1985.75,1986,1986.25,1986.5,1986.75,1987,1987.25,1987.5,1987.75,1988,1988.25,
    1988.5,1988.75,1989,1989.25,1989.5,1989.75,1990,1990.25,1990.5,1990.75,1991,
    1991.25,1991.5,1991.75,1992,1992.25,1992.5,1992.75,1993,1993.25,1993.5,1993.75,
    1994,1994.25,1994.5,1994.75,1995,1995.25,1995.5,1995.75,1996,1996.25,1996.5,
    1996.75,1997,1997.25,1997.5,1997.75,1998,1998.25,1998.5,1998.75,1999,1999.25,
    1999.5,1999.75,2000,2000.25,2000.5,2000.75,2001,2001.25,2001.5,2001.75,2002,
    2002.25,2002.5,2002.75,2003,2003.25,2003.5,2003.75,2004,2004.25,2004.5,2004.75,
    2005,2005.25,2005.5,2005.75,2006,2006.25,2006.5,2006.75,2007,2007.25,2007.5,
    2007.75,2008,2008.25,2008.5,2008.75,2009,2009.25,2009.5,2009.75,2010,2010.25,
    2010.5,2010.75,2011,2011.25,2011.5,2011.75,2012,2012.25,2012.5,2012.75,2013,
    2013.25,2013.5,2013.75,2014,2014.25,2014.5,2014.75,2015,2015.25,2015.5,2015.75,
    2016,2016.25,2016.5,2016.75,2017,2017.25];

var height = 600;
var width = 800;
var margin = {left:100,right:50,top:40,bottom:0}

var y = d3.scaleLinear()
 .domain([0,d3.max(dataArray)])
 .range([height, 0]);

var x = d3.scaleLinear()
 .domain(d3.extent(dataYears))
 .range([0,width]);



var yAxis = d3.axisLeft(y).ticks(4).tickPadding(10).tickSize(10);
var xAxis = d3.axisBottom(x);

var area = d3.area()
    .x(function(d,i){return x(dataYears[i]);})
    .y0(height)
    .y1(function(d){return y(d);});

var svg = d3.select("body").append("svg").attr("height",height+margin.top+margin.bottom).attr("width",width+margin.right+margin.left)
var chartGroup = svg.append("g").attr("class","graph").attr("transform","translate("+margin.left+","+margin.top+")");

chartGroup.append("path").attr("d",area(dataArray));
chartGroup.append("g").attr("class","axis y").call(yAxis);
chartGroup.append("g").attr("class","axis x").attr("transform","translate(0,"+height+")");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

