Javascript d3中两行之间的有条件填充区域

对于那些与D3一起工作的人。。。我有一个多折线图，并设法填补了两个系列之间的区域。第二部分我一直想弄清楚的是，是否有可能传递条件语句，这样当一个集合的数据点值大于另一个集合的数据点值时，填充区域的颜色就会改变

var w=200，
h=200，
p=50；
变量ddd=[1,22,12]，[2,45,09]，[3,54,14]，[4,32,18]，[5,89,19]，[6,76,22]，[7,72,29]，[8,68,34]，[9,73,22]，[10,88,37]，[11,92,44]，[12,95,89]，[13,97,97]，[14,99,1.21]，[15,1.11,1,1.11,2.38]，[17,1.13,2.11]，[18,1.18,2.11,1.11]，[19,1,2,2,19]，[1,2,19]，
xmin=d3.min（ddd，函数（d）{返回d[0]；}），
xmax=d3.max（ddd，函数（d）{返回d[0]；}），
ymin=0，
ymax=2.25；
var xscale=d3.scale.linear（）
.domain（[xmin，xmax]）
.范围（[p，w-p]）；
var yscale=d3.scale.linear（）
.domain（[ymin，ymax]）
.范围（[h-p，p]）；
var xaxis=d3.svg.axis（）
.scale（xscale）
.东方（“底部”）；
var yaxis=d3.svg.axis（）
.刻度（yscale）
.东方（“左”）；
var central=d3.选择（“div#z”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var line1=d3.svg.line（）
.x（函数（d）{return xscale（d[0]）}）
.y（函数（d）{yscale（d[1]）}）；
var line2=d3.svg.line（）
.x（函数（d）{return xscale（d[0]）}）
.y（函数（d）{yscale（d[2]）}）；
var x=d3.刻度.线性（）.范围（[p，w-p]），
y=d3.标度线性范围（[h-p，p]）；
var area=d3.svg.area（）
.x（函数（d）{return xscale（d[0]）}）
//.y0（惠普）
.y0（函数（d）{return yscale（d[2]）}）
.y1（函数（d）{yscale（d[1]）}）；
中央。附加（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换（0）”+（h-p）+>）
.呼叫（xaxis）；
中央。附加（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+（p）+“，0）”）
.呼叫（yaxis）；
append（“svg:path”）
.attr（“d”，第1行（ddd））
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，2）
.attr（'fill'，'none'）；
append（“svg:path”）
.attr（“d”，第2行（ddd））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
central.append（“路径”）
.基准（ddd）
.attr（“类别”、“区域”）
//函数（d）{if（d[1]>d[2]）{return area}else{return area51}；}）
.attr（“d”，区域）
。轴路径，
.轴线{
填充：无；
笔画：黑色；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：9px；
}
.区域{
填充物：淡蓝色；
笔画宽度：0；
}
.区域51{
填充物：淡蓝色；
笔画宽度：0；
}
.区域：悬停{
填充物：灰色；
笔画宽度：0；
}

我正在使用…一个很棒的库来检测路径交叉点（提供：@thelonious）

要获得交点，请执行以下操作：

var shape1 = new Path(rl.node());
var shape2 = new Path(bl.node());

var overlays = Intersection.intersectShapes(shape1, shape2);

如下图所示，分别制作左面积图和右面积图，并添加不同的类

if (overlays.points.length > 0){
  var d = overlays.points[0]
  var midx = xscale.invert(d.x);
  var midy = yscale.invert(d.y);

  //assuming that the curve will have single y values for an x
  var left = ddd.filter(function(k){ return (k[0] <= midx);});
  var right = ddd.filter(function(k){ return (k[0] > midx);});
  //inserting the new middle point
  right.unshift([midx,midy,midy]);
  //left area
  central.append("path")
    .datum(left)
    .attr("class", "area")
    .attr("d",area);
    //right area  
    central.append("path")
    .datum(right)
    .attr("class", "area51")
    .attr("d",area);
}

if（overlays.points.length>0）{
var d=叠加。点[0]
var midx=x刻度反转（d.x）；
var midy=yscale.invert（d.y）；
//假设曲线对于x具有单个y值
var left=ddd.filter（函数（k）{return（k[0]midx）；}）；
//插入新的中间点
对。取消移位（[midx，midy，midy]）；
//左侧区域
central.append（“路径”）
.基准面（左）
.attr（“类别”、“区域”）
.attr（“d”，区域）；
//右区
central.append（“路径”）
.基准面（右）
.attr（“类别”、“区域51”）
.attr（“d”，区域）；
}

工作代码

希望这有帮助
 你的扑救无效。它不会为两条线之间的区域着色。而且，这是否适用于多个交叉口？
if (overlays.points.length > 0){
  var d = overlays.points[0]
  var midx = xscale.invert(d.x);
  var midy = yscale.invert(d.y);

  //assuming that the curve will have single y values for an x
  var left = ddd.filter(function(k){ return (k[0] <= midx);});
  var right = ddd.filter(function(k){ return (k[0] > midx);});
  //inserting the new middle point
  right.unshift([midx,midy,midy]);
  //left area
  central.append("path")
    .datum(left)
    .attr("class", "area")
    .attr("d",area);
    //right area  
    central.append("path")
    .datum(right)
    .attr("class", "area51")
    .attr("d",area);
}