我在 d3.js 中绘制两条线相互重叠(有时第一条更高，有时第二条在 y 轴上具有更高的值)。我想以这样的方式填充线下的区域:
- 下方的区域将为灰色。
- 两条线之间的区域将为绿色或红色。如果第一行的值较高，则为绿色，如果第二行的值较高，则为红色。
目前我只有这个:
var area = d3.area()
.curve(d3.curveBasis)
.x(function(d) { return margin.left + x(d.date); })
.y0(margin.top + height)
.y1(function(d) { return y(d.value); });
但这当然行不通。我知道堆积面积图，但我认为我需要一些技巧来完成这项工作。
最佳答案
您可以重叠 2 个区域:
// a gray area which finish in the minimun data
var greyArea = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(Math.min(d["First Line"], d["Second Line"])); });
// a colored area which in the value of the first line
var coloredArea = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y1(function(d) { return y(d["First Line"]); });
然后画出它们，
svg.append("clipPath")
.attr("id", "clip-above")
.append("path")
.attr("d", coloredArea.y0(height));
svg.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("d", coloredArea.y0(0));
svg.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clip-below)")
.attr("d", coloredArea.y0(function(d) { return y(d["Second Line"]); }));
svg.append("path")
.attr("class", "area above")
.attr("clip-path", "url(#clip-above)")
.attr("d", coloredArea);
svg.append("path")
.attr("class", "area gray")
.attr("d", greyArea.y0(height));
工作演示 JSFiddle Demo
var data = [{"date":"20111001","First Line":"63.4","Second Line":"62.7"},{"date":"20111002","First Line":"58.0","Second Line":"59.9"},{"date":"20111003","First Line":"53.3","Second Line":"59.1"},{"date":"20111004","First Line":"55.7","Second Line":"58.8"},{"date":"20111005","First Line":"64.2","Second Line":"58.7"},{"date":"20111006","First Line":"58.8","Second Line":"57.0"},{"date":"20111007","First Line":"57.9","Second Line":"56.7"},{"date":"20111008","First Line":"61.8","Second Line":"56.8"},{"date":"20111009","First Line":"69.3","Second Line":"56.7"},{"date":"20111010","First Line":"71.2","Second Line":"60.1"},{"date":"20111011","First Line":"68.7","Second Line":"61.1"},{"date":"20111012","First Line":"61.8","Second Line":"61.5"},{"date":"20111013","First Line":"63.0","Second Line":"64.3"},{"date":"20111014","First Line":"66.9","Second Line":"67.1"},{"date":"20111015","First Line":"61.7","Second Line":"64.6"},{"date":"20111016","First Line":"61.8","Second Line":"61.6"},{"date":"20111017","First Line":"62.8","Second Line":"61.1"},{"date":"20111018","First Line":"60.8","Second Line":"59.2"},{"date":"20111019","First Line":"62.1","Second Line":"58.9"},{"date":"20111020","First Line":"65.1","Second Line":"57.2"},{"date":"20111021","First Line":"55.6","Second Line":"56.4"},{"date":"20111022","First Line":"54.4","Second Line":"60.7"},{"date":"20111023","First Line":"54.4","Second Line":"65.1"},{"date":"20111024","First Line":"54.8","Second Line":"60.9"},{"date":"20111025","First Line":"57.9","Second Line":"56.1"},{"date":"20111026","First Line":"54.6","Second Line":"54.6"},{"date":"20111027","First Line":"54.4","Second Line":"56.1"},{"date":"20111028","First Line":"42.5","Second Line":"58.1"},{"date":"20111029","First Line":"40.9","Second Line":"57.5"},{"date":"20111030","First Line":"38.6","Second Line":"57.7"},{"date":"20111031","First Line":"44.2","Second Line":"55.1"},{"date":"20111101","First Line":"49.6","Second Line":"57.9"},{"date":"20111102","First Line":"47.2","Second Line":"64.6"},{"date":"20111103","First Line":"50.1","Second Line":"56.2"},{"date":"20111104","First Line":"50.1","Second Line":"50.5"},{"date":"20111105","First Line":"43.5","Second Line":"51.3"},{"date":"20111106","First Line":"43.8","Second Line":"52.6"},{"date":"20111107","First Line":"48.9","Second Line":"51.4"},{"date":"20111108","First Line":"55.5","Second Line":"50.6"},{"date":"20111109","First Line":"53.7","Second Line":"54.6"},{"date":"20111110","First Line":"57.7","Second Line":"55.6"},{"date":"20111111","First Line":"48.5","Second Line":"53.9"},{"date":"20111112","First Line":"46.8","Second Line":"54.0"},{"date":"20111113","First Line":"51.1","Second Line":"53.8"},{"date":"20111114","First Line":"56.8","Second Line":"53.5"},{"date":"20111115","First Line":"59.7","Second Line":"53.4"},{"date":"20111116","First Line":"56.5","Second Line":"52.2"},{"date":"20111117","First Line":"49.6","Second Line":"52.7"},{"date":"20111118","First Line":"41.5","Second Line":"53.1"},{"date":"20111119","First Line":"44.3","Second Line":"49.0"},{"date":"20111120","First Line":"54.0","Second Line":"50.4"},{"date":"20111121","First Line":"54.1","Second Line":"51.1"},{"date":"20111122","First Line":"49.4","Second Line":"52.3"},{"date":"20111123","First Line":"50.0","Second Line":"54.6"},{"date":"20111124","First Line":"44.0","Second Line":"55.1"},{"date":"20111125","First Line":"50.3","Second Line":"51.5"},{"date":"20111126","First Line":"52.1","Second Line":"53.6"},{"date":"20111127","First Line":"49.6","Second Line":"52.3"},{"date":"20111128","First Line":"57.2","Second Line":"51.0"},{"date":"20111129","First Line":"59.1","Second Line":"49.5"},{"date":"20111130","First Line":"50.6","Second Line":"49.8"},{"date":"20111201","First Line":"44.3","Second Line":"60.4"},{"date":"20111202","First Line":"43.9","Second Line":"62.2"},{"date":"20111203","First Line":"42.1","Second Line":"58.3"},{"date":"20111204","First Line":"43.9","Second Line":"52.7"},{"date":"20111205","First Line":"50.2","Second Line":"51.5"},{"date":"20111206","First Line":"54.2","Second Line":"49.9"},{"date":"20111207","First Line":"54.6","Second Line":"48.6"},{"date":"20111208","First Line":"43.4","Second Line":"46.4"},{"date":"20111209","First Line":"42.2","Second Line":"49.8"},{"date":"20111210","First Line":"45.0","Second Line":"52.1"},{"date":"20111211","First Line":"33.8","Second Line":"48.8"},{"date":"20111212","First Line":"36.8","Second Line":"47.4"},{"date":"20111213","First Line":"38.6","Second Line":"47.2"},{"date":"20111214","First Line":"41.9","Second Line":"46.1"},{"date":"20111215","First Line":"49.6","Second Line":"48.8"},{"date":"20111216","First Line":"50.2","Second Line":"47.9"},{"date":"20111217","First Line":"40.6","Second Line":"49.8"},{"date":"20111218","First Line":"29.1","Second Line":"49.1"},{"date":"20111219","First Line":"33.7","Second Line":"48.3"},{"date":"20111220","First Line":"45.8","Second Line":"49.3"},{"date":"20111221","First Line":"47.4","Second Line":"48.4"},{"date":"20111222","First Line":"54.4","Second Line":"53.3"},{"date":"20111223","First Line":"47.8","Second Line":"47.5"},{"date":"20111224","First Line":"34.9","Second Line":"47.9"},{"date":"20111225","First Line":"35.9","Second Line":"48.9"},{"date":"20111226","First Line":"43.6","Second Line":"45.9"},{"date":"20111227","First Line":"42.9","Second Line":"47.2"},{"date":"20111228","First Line":"46.2","Second Line":"48.9"},{"date":"20111229","First Line":"30.8","Second Line":"50.9"},{"date":"20111230","First Line":"40.8","Second Line":"52.9"},{"date":"20111231","First Line":"49.8","Second Line":"50.1"},{"date":"20120101","First Line":"46.3","Second Line":"53.9"},{"date":"20120102","First Line":"43.2","Second Line":"53.1"},{"date":"20120103","First Line":"30.3","Second Line":"49.7"},{"date":"20120104","First Line":"19.2","Second Line":"52.7"},{"date":"20120105","First Line":"32.1","Second Line":"52.6"},{"date":"20120106","First Line":"41.2","Second Line":"49.0"},{"date":"20120107","First Line":"47.0","Second Line":"51.0"},{"date":"20120108","First Line":"46.0","Second Line":"56.8"},{"date":"20120109","First Line":"34.7","Second Line":"52.3"},{"date":"20120110","First Line":"39.4","Second Line":"51.6"},{"date":"20120111","First Line":"40.4","Second Line":"49.8"},{"date":"20120112","First Line":"45.4","Second Line":"51.9"},{"date":"20120113","First Line":"40.7","Second Line":"53.7"},{"date":"20120114","First Line":"30.4","Second Line":"52.9"},{"date":"20120115","First Line":"23.9","Second Line":"49.7"},{"date":"20120116","First Line":"22.6","Second Line":"45.3"},{"date":"20120117","First Line":"39.8","Second Line":"43.6"},{"date":"20120118","First Line":"43.2","Second Line":"45.0"},{"date":"20120119","First Line":"26.3","Second Line":"47.3"},{"date":"20120120","First Line":"32.8","Second Line":"51.4"},{"date":"20120121","First Line":"27.4","Second Line":"53.7"},{"date":"20120122","First Line":"25.0","Second Line":"48.3"},{"date":"20120123","First Line":"39.4","Second Line":"52.9"},{"date":"20120124","First Line":"48.7","Second Line":"49.1"},{"date":"20120125","First Line":"43.0","Second Line":"52.1"},{"date":"20120126","First Line":"37.1","Second Line":"53.6"},{"date":"20120127","First Line":"48.2","Second Line":"50.4"},{"date":"20120128","First Line":"43.7","Second Line":"50.3"},{"date":"20120129","First Line":"40.1","Second Line":"53.8"},{"date":"20120130","First Line":"38.0","Second Line":"51.9"},{"date":"20120131","First Line":"43.5","Second Line":"50.0"},{"date":"20120201","First Line":"50.4","Second Line":"50.0"},{"date":"20120202","First Line":"45.8","Second Line":"51.3"},{"date":"20120203","First Line":"37.5","Second Line":"51.5"},{"date":"20120204","First Line":"40.8","Second Line":"52.0"},{"date":"20120205","First Line":"36.5","Second Line":"53.8"},{"date":"20120206","First Line":"39.1","Second Line":"54.6"},{"date":"20120207","First Line":"43.2","Second Line":"54.3"},{"date":"20120208","First Line":"36.5","Second Line":"51.9"},{"date":"20120209","First Line":"36.5","Second Line":"53.8"},{"date":"20120210","First Line":"38.3","Second Line":"53.9"},{"date":"20120211","First Line":"36.9","Second Line":"52.3"},{"date":"20120212","First Line":"29.7","Second Line":"50.1"},{"date":"20120213","First Line":"33.1","Second Line":"49.5"},{"date":"20120214","First Line":"39.6","Second Line":"48.6"},{"date":"20120215","First Line":"42.3","Second Line":"49.9"},{"date":"20120216","First Line":"39.7","Second Line":"52.4"},{"date":"20120217","First Line":"46.0","Second Line":"49.9"},{"date":"20120218","First Line":"41.2","Second Line":"51.6"},{"date":"20120219","First Line":"39.8","Second Line":"47.8"},{"date":"20120220","First Line":"38.1","Second Line":"48.7"},{"date":"20120221","First Line":"37.1","Second Line":"49.7"},{"date":"20120222","First Line":"45.5","Second Line":"53.4"},{"date":"20120223","First Line":"50.6","Second Line":"54.1"},{"date":"20120224","First Line":"42.7","Second Line":"55.9"},{"date":"20120225","First Line":"42.6","Second Line":"51.7"},{"date":"20120226","First Line":"36.9","Second Line":"47.7"},{"date":"20120227","First Line":"40.9","Second Line":"45.4"},{"date":"20120228","First Line":"45.9","Second Line":"47.0"},{"date":"20120229","First Line":"40.7","Second Line":"49.8"},{"date":"20120301","First Line":"41.3","Second Line":"48.9"},{"date":"20120302","First Line":"36.8","Second Line":"48.1"},{"date":"20120303","First Line":"47.6","Second Line":"50.7"},{"date":"20120304","First Line":"44.2","Second Line":"55.0"},{"date":"20120305","First Line":"38.5","Second Line":"48.8"},{"date":"20120306","First Line":"32.9","Second Line":"48.4"},{"date":"20120307","First Line":"43.3","Second Line":"49.9"},{"date":"20120308","First Line":"51.2","Second Line":"49.2"},{"date":"20120309","First Line":"47.8","Second Line":"51.7"},{"date":"20120310","First Line":"37.2","Second Line":"49.3"},{"date":"20120311","First Line":"42.9","Second Line":"50.0"},{"date":"20120312","First Line":"48.8","Second Line":"48.6"},{"date":"20120313","First Line":"52.6","Second Line":"53.9"},{"date":"20120314","First Line":"60.5","Second Line":"55.2"},{"date":"20120315","First Line":"47.2","Second Line":"55.9"},{"date":"20120316","First Line":"44.7","Second Line":"54.6"},{"date":"20120317","First Line":"48.2","Second Line":"48.2"},{"date":"20120318","First Line":"48.2","Second Line":"47.1"},{"date":"20120319","First Line":"53.1","Second Line":"45.8"},{"date":"20120320","First Line":"57.8","Second Line":"49.7"},{"date":"20120321","First Line":"57.5","Second Line":"51.4"},{"date":"20120322","First Line":"57.3","Second Line":"51.4"},{"date":"20120323","First Line":"61.7","Second Line":"48.4"},{"date":"20120324","First Line":"55.8","Second Line":"49.0"},{"date":"20120325","First Line":"48.4","Second Line":"46.4"},{"date":"20120326","First Line":"49.8","Second Line":"49.7"},{"date":"20120327","First Line":"39.6","Second Line":"54.1"},{"date":"20120328","First Line":"49.7","Second Line":"54.6"},{"date":"20120329","First Line":"56.8","Second Line":"52.3"},{"date":"20120330","First Line":"46.5","Second Line":"54.5"},{"date":"20120331","First Line":"42.2","Second Line":"56.2"},{"date":"20120401","First Line":"45.3","Second Line":"51.1"},{"date":"20120402","First Line":"48.1","Second Line":"50.5"},{"date":"20120403","First Line":"51.2","Second Line":"52.2"},{"date":"20120404","First Line":"61.0","Second Line":"50.6"},{"date":"20120405","First Line":"50.7","Second Line":"47.9"},{"date":"20120406","First Line":"48.0","Second Line":"47.4"},{"date":"20120407","First Line":"51.1","Second Line":"49.4"},{"date":"20120408","First Line":"55.7","Second Line":"50.0"},{"date":"20120409","First Line":"58.3","Second Line":"51.3"},{"date":"20120410","First Line":"55.0","Second Line":"53.8"},{"date":"20120411","First Line":"49.0","Second Line":"52.9"},{"date":"20120412","First Line":"51.7","Second Line":"53.9"},{"date":"20120413","First Line":"53.1","Second Line":"50.2"},{"date":"20120414","First Line":"55.2","Second Line":"50.9"},{"date":"20120415","First Line":"62.3","Second Line":"51.5"},{"date":"20120416","First Line":"62.9","Second Line":"51.9"},{"date":"20120417","First Line":"69.3","Second Line":"53.2"},{"date":"20120418","First Line":"59.0","Second Line":"53.0"},{"date":"20120419","First Line":"54.1","Second Line":"55.1"},{"date":"20120420","First Line":"56.5","Second Line":"55.8"},{"date":"20120421","First Line":"58.2","Second Line":"58.0"},{"date":"20120422","First Line":"52.4","Second Line":"52.8"},{"date":"20120423","First Line":"51.6","Second Line":"55.1"},{"date":"20120424","First Line":"49.3","Second Line":"57.9"},{"date":"20120425","First Line":"52.5","Second Line":"57.5"},{"date":"20120426","First Line":"50.5","Second Line":"55.3"},{"date":"20120427","First Line":"51.9","Second Line":"53.5"},{"date":"20120428","First Line":"47.4","Second Line":"54.7"},{"date":"20120429","First Line":"54.1","Second Line":"54.0"},{"date":"20120430","First Line":"51.9","Second Line":"53.4"},{"date":"20120501","First Line":"57.4","Second Line":"52.7"},{"date":"20120502","First Line":"53.7","Second Line":"50.7"},{"date":"20120503","First Line":"53.1","Second Line":"52.6"},{"date":"20120504","First Line":"57.2","Second Line":"53.4"},{"date":"20120505","First Line":"57.0","Second Line":"53.1"},{"date":"20120506","First Line":"56.6","Second Line":"56.5"},{"date":"20120507","First Line":"54.6","Second Line":"55.3"},{"date":"20120508","First Line":"57.9","Second Line":"52.0"},{"date":"20120509","First Line":"59.2","Second Line":"52.4"},{"date":"20120510","First Line":"61.1","Second Line":"53.4"},{"date":"20120511","First Line":"59.7","Second Line":"53.1"},{"date":"20120512","First Line":"64.1","Second Line":"49.9"},{"date":"20120513","First Line":"65.3","Second Line":"52.0"},{"date":"20120514","First Line":"64.2","Second Line":"56.0"},{"date":"20120515","First Line":"62.0","Second Line":"53.0"},{"date":"20120516","First Line":"63.8","Second Line":"51.0"},{"date":"20120517","First Line":"64.5","Second Line":"51.4"},{"date":"20120518","First Line":"61.0","Second Line":"52.2"},{"date":"20120519","First Line":"62.6","Second Line":"52.4"},{"date":"20120520","First Line":"66.2","Second Line":"54.5"},{"date":"20120521","First Line":"62.7","Second Line":"52.8"},{"date":"20120522","First Line":"63.7","Second Line":"53.9"},{"date":"20120523","First Line":"66.4","Second Line":"56.5"},{"date":"20120524","First Line":"64.5","Second Line":"54.7"},{"date":"20120525","First Line":"65.4","Second Line":"52.5"},{"date":"20120526","First Line":"69.4","Second Line":"52.1"},{"date":"20120527","First Line":"71.9","Second Line":"52.2"},{"date":"20120528","First Line":"74.4","Second Line":"52.9"},{"date":"20120529","First Line":"75.9","Second Line":"52.1"},{"date":"20120530","First Line":"72.9","Second Line":"52.1"},{"date":"20120531","First Line":"72.5","Second Line":"53.3"},{"date":"20120601","First Line":"67.2","Second Line":"54.8"},{"date":"20120602","First Line":"68.3","Second Line":"54.0"},{"date":"20120603","First Line":"67.7","Second Line":"52.3"},{"date":"20120604","First Line":"61.9","Second Line":"55.3"},{"date":"20120605","First Line":"58.3","Second Line":"53.5"},{"date":"20120606","First Line":"61.7","Second Line":"54.1"},{"date":"20120607","First Line":"66.7","Second Line":"53.9"},{"date":"20120608","First Line":"68.7","Second Line":"54.4"},{"date":"20120609","First Line":"72.2","Second Line":"55.0"},{"date":"20120610","First Line":"72.6","Second Line":"60.0"},{"date":"20120611","First Line":"69.2","Second Line":"57.2"},{"date":"20120612","First Line":"66.9","Second Line":"55.1"},{"date":"20120613","First Line":"66.7","Second Line":"53.3"},{"date":"20120614","First Line":"67.7","Second Line":"53.4"},{"date":"20120615","First Line":"68.5","Second Line":"54.6"},{"date":"20120616","First Line":"67.5","Second Line":"57.0"},{"date":"20120617","First Line":"64.2","Second Line":"55.6"},{"date":"20120618","First Line":"61.7","Second Line":"52.5"},{"date":"20120619","First Line":"66.4","Second Line":"53.9"},{"date":"20120620","First Line":"77.9","Second Line":"55.3"},{"date":"20120621","First Line":"88.3","Second Line":"53.3"},{"date":"20120622","First Line":"82.2","Second Line":"54.1"},{"date":"20120623","First Line":"77.0","Second Line":"55.2"},{"date":"20120624","First Line":"75.4","Second Line":"55.8"},{"date":"20120625","First Line":"70.9","Second Line":"56.8"},{"date":"20120626","First Line":"65.9","Second Line":"57.5"},{"date":"20120627","First Line":"73.5","Second Line":"57.7"},{"date":"20120628","First Line":"77.4","Second Line":"56.6"},{"date":"20120629","First Line":"79.6","Second Line":"56.4"},{"date":"20120630","First Line":"84.2","Second Line":"58.4"},{"date":"20120701","First Line":"81.8","Second Line":"58.8"},{"date":"20120702","First Line":"82.5","Second Line":"56.4"},{"date":"20120703","First Line":"80.2","Second Line":"56.5"},{"date":"20120704","First Line":"77.8","Second Line":"55.8"},{"date":"20120705","First Line":"86.1","Second Line":"54.8"},{"date":"20120706","First Line":"79.9","Second Line":"54.9"},{"date":"20120707","First Line":"83.5","Second Line":"54.7"},{"date":"20120708","First Line":"81.5","Second Line":"52.8"},{"date":"20120709","First Line":"77.8","Second Line":"53.7"},{"date":"20120710","First Line":"76.1","Second Line":"53.1"},{"date":"20120711","First Line":"76.3","Second Line":"52.7"},{"date":"20120712","First Line":"75.8","Second Line":"52.0"},{"date":"20120713","First Line":"77.2","Second Line":"53.4"},{"date":"20120714","First Line":"79.3","Second Line":"54.0"},{"date":"20120715","First Line":"78.9","Second Line":"54.0"},{"date":"20120716","First Line":"79.6","Second Line":"54.5"},{"date":"20120717","First Line":"83.3","Second Line":"56.7"},{"date":"20120718","First Line":"84.3","Second Line":"57.5"},{"date":"20120719","First Line":"75.1","Second Line":"57.1"},{"date":"20120720","First Line":"68.4","Second Line":"58.1"},{"date":"20120721","First Line":"68.4","Second Line":"57.6"},{"date":"20120722","First Line":"72.2","Second Line":"56.0"},{"date":"20120723","First Line":"75.6","Second Line":"56.6"},{"date":"20120724","First Line":"82.6","Second Line":"57.8"},{"date":"20120725","First Line":"78.4","Second Line":"57.5"},{"date":"20120726","First Line":"77.0","Second Line":"56.4"},{"date":"20120727","First Line":"79.4","Second Line":"55.3"},{"date":"20120728","First Line":"77.4","Second Line":"55.0"},{"date":"20120729","First Line":"72.5","Second Line":"55.6"},{"date":"20120730","First Line":"72.9","Second Line":"55.6"},{"date":"20120731","First Line":"73.6","Second Line":"55.9"},{"date":"20120801","First Line":"75.0","Second Line":"55.4"},{"date":"20120802","First Line":"77.7","Second Line":"54.4"},{"date":"20120803","First Line":"79.7","Second Line":"53.7"},{"date":"20120804","First Line":"79.6","Second Line":"54.1"},{"date":"20120805","First Line":"81.5","Second Line":"57.8"},{"date":"20120806","First Line":"80.0","Second Line":"58.2"},{"date":"20120807","First Line":"75.7","Second Line":"58.0"},{"date":"20120808","First Line":"77.8","Second Line":"57.0"},{"date":"20120809","First Line":"78.6","Second Line":"55.0"},{"date":"20120810","First Line":"77.8","Second Line":"54.8"},{"date":"20120811","First Line":"78.5","Second Line":"53.0"},{"date":"20120812","First Line":"78.8","Second Line":"52.5"},{"date":"20120813","First Line":"78.6","Second Line":"53.3"},{"date":"20120814","First Line":"76.8","Second Line":"53.9"},{"date":"20120815","First Line":"76.7","Second Line":"56.2"},{"date":"20120816","First Line":"75.9","Second Line":"57.1"},{"date":"20120817","First Line":"77.6","Second Line":"55.3"},{"date":"20120818","First Line":"72.6","Second Line":"56.2"},{"date":"20120819","First Line":"70.4","Second Line":"54.3"},{"date":"20120820","First Line":"71.8","Second Line":"53.1"},{"date":"20120821","First Line":"73.6","Second Line":"53.4"},{"date":"20120822","First Line":"74.7","Second Line":"54.5"},{"date":"20120823","First Line":"74.6","Second Line":"55.7"},{"date":"20120824","First Line":"76.0","Second Line":"54.8"},{"date":"20120825","First Line":"76.2","Second Line":"53.8"},{"date":"20120826","First Line":"73.4","Second Line":"56.5"},{"date":"20120827","First Line":"74.6","Second Line":"58.3"},{"date":"20120828","First Line":"79.4","Second Line":"58.7"},{"date":"20120829","First Line":"74.7","Second Line":"57.5"},{"date":"20120830","First Line":"73.5","Second Line":"55.9"},{"date":"20120831","First Line":"77.9","Second Line":"55.4"},{"date":"20120901","First Line":"80.7","Second Line":"55.7"},{"date":"20120902","First Line":"75.1","Second Line":"53.1"},{"date":"20120903","First Line":"73.5","Second Line":"53.5"},{"date":"20120904","First Line":"73.5","Second Line":"52.5"},{"date":"20120905","First Line":"77.7","Second Line":"54.5"},{"date":"20120906","First Line":"74.2","Second Line":"56.3"},{"date":"20120907","First Line":"76.0","Second Line":"56.4"},{"date":"20120908","First Line":"77.1","Second Line":"56.5"},{"date":"20120909","First Line":"69.7","Second Line":"56.4"},{"date":"20120910","First Line":"67.8","Second Line":"55.4"},{"date":"20120911","First Line":"64.0","Second Line":"56.2"},{"date":"20120912","First Line":"68.1","Second Line":"55.7"},{"date":"20120913","First Line":"69.3","Second Line":"54.3"},{"date":"20120914","First Line":"70.0","Second Line":"55.2"},{"date":"20120915","First Line":"69.3","Second Line":"54.3"},{"date":"20120916","First Line":"66.3","Second Line":"52.9"},{"date":"20120917","First Line":"67.0","Second Line":"54.8"},{"date":"20120918","First Line":"72.8","Second Line":"54.8"},{"date":"20120919","First Line":"67.2","Second Line":"56.8"},{"date":"20120920","First Line":"62.1","Second Line":"55.4"},{"date":"20120921","First Line":"64.0","Second Line":"55.8"},{"date":"20120922","First Line":"65.5","Second Line":"55.9"},{"date":"20120923","First Line":"65.7","Second Line":"52.8"},{"date":"20120924","First Line":"60.4","Second Line":"54.5"},{"date":"20120925","First Line":"63.2","Second Line":"53.3"},{"date":"20120926","First Line":"68.5","Second Line":"53.6"},{"date":"20120927","First Line":"69.2","Second Line":"52.1"},{"date":"20120928","First Line":"68.7","Second Line":"52.6"},{"date":"20120929","First Line":"62.5","Second Line":"53.9"},{"date":"20120930","First Line":"62.3","Second Line":"55.1"}];
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(Math.min(d["First Line"], d["Second Line"])); });
var area = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y1(function(d) { return y(d["First Line"]); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function(d) {
d.date = parseDate(d.date);
d["First Line"]= +d["First Line"];
d["Second Line"] = +d["Second Line"];
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(data, function(d) { return Math.min(d["First Line"], d["Second Line"]); }),
d3.max(data, function(d) { return Math.max(d["First Line"], d["Second Line"]); })
]);
svg.datum(data);
svg.append("clipPath")
.attr("id", "clip-above")
.append("path")
.attr("d", area.y0(height));
svg.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("d", area.y0(0));
svg.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clip-below)")
.attr("d", area.y0(function(d) { return y(d["Second Line"]); }));
svg.append("path")
.attr("class", "area above")
.attr("clip-path", "url(#clip-above)")
.attr("d", area);
svg.append("path")
.attr("class", "line")
.attr("d", line.y0(height));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
/*display: none;*/
}
.area.below {
fill: rgb(252,141,89);
stroke: #000;
stroke-width: 1px;
}
.area.above {
fill: rgb(145,207,96);
stroke: #000;
stroke-width: 1px;
}
.line {
fill: #ccc;
stroke: #000;
stroke-width: 0.5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>关于javascript - 在 d3.js 中填充两个重叠区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44400154/