Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/382.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript d3.js面积图的最后一行在错误的一侧_Javascript_D3.js - Fatal编程技术网

Javascript d3.js面积图的最后一行在错误的一侧

Javascript d3.js面积图的最后一行在错误的一侧,javascript,d3.js,Javascript,D3.js,我正在尝试使用x轴和y轴的两个阵列使我的面积图工作,两个阵列都已缩放。我的问题是路径的最后几行不是沿着图的右侧和底部完成的,而是直接从最后一个y值返回原点 这是代码,下面附上了一个截图 var dataArray=[243.1246.3250.1260.3266.2272.9279.5280.7275.4271.7273.3271.0281.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,39

我正在尝试使用x轴和y轴的两个阵列使我的面积图工作,两个阵列都已缩放。我的问题是路径的最后几行不是沿着图的右侧和底部完成的,而是直接从最后一个y值返回原点

这是代码,下面附上了一个截图

var dataArray=[243.1246.3250.1260.3266.2272.9279.5280.7275.4271.7273.3271.0281.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数据年数=[1947.251947.51947.7519481948.251948.51948.7519491949.251949.51949.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高度=600;
var宽度=800;
变量y=d3.scaleLinear()
.domain([0,d3.max(数据数组)])
.范围([高度,0]);
var x=d3.scaleLinear()
.领域(d3.范围(数据年))
.范围([0,宽度]);
var margin={左:100,右:50,上:40,下:0}
var yAxis=d3.axisLeft(y)、ticks(4)、tickPadding(10)、tickSize(10);
var xAxis=d3.axisBottom(x);
var area=d3.area()
.x(函数(d,i){返回x(数据年[i]);})
.y0(高度)
.y1(函数(d){返回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”,区域(数据数组));
chartGroup.append(“g”).attr(“类”、“y轴”).call(yAxis);
chartGroup.append(“g”).attr(“类”、“x轴”).attr(“变换”、“平移(0)”+height+)).call(xAxis)

如果代码已关闭,则只是数据数组出现问题。 与数据数组(长度281)相比,年份数组缺少一个值(长度280)。如果这些长度相同,您将得到所需的结果。我已向年份数组(2017.25)添加了一个新的年份值,并按预期显示。请参阅下面的代码片段:

var dataArray=[243.1246.3250.1260.3266.2272.9279.5280.7275.4271.7273.3271.0281.2,
290.7,308.5,320.3,336.4,344.5,351.8,356.6,360.2,361.4,368.1,