我正在尝试使用 x 轴和 y 轴的两个数组来使面积图正常工作，并且都进行了缩放。我的问题是路径的最后几行没有沿着图形的右侧和底部完成，而是直接从最后一个 y 值返回到原点。
这是代码，下面还附有屏幕截图。
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>
最佳答案
您已保存代码，只是您的数据数组存在问题。 与 data 数组(长度 281)相比，years 数组缺少一个值(长度 280)。如果它们的长度相同，您将获得所需的结果。我已向年份数组 (2017.25) 添加了一个新的年份值，并且它按预期显示。请参阅下面的片段:
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>关于javascript - d3.js 面积图的最后一条线位于错误的一侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44038845/