所以我有一个图表绘制了流量与日期和价格与日期的关系。我试图遮蔽两条线之间的区域。但是，我想根据哪条线越高，将它涂成不同的颜色。以下工作没有最后一个要求：
var area = d3.svg.area()
.x0(function(d) { return x(d3.time.format("%m/%d/%Y").parse(d.original.date)); })
.x1(function(d) { return x(d3.time.format("%m/%d/%Y").parse(d.original.date)); })
.y0(function(d) { return y(parseInt(d.original.traffic)); })
.y1(function(d) { return y(parseInt(d.original.rate)); })
但是，添加最后一个要求，我尝试使用defined（）：
.defined(function(d){ return parseInt(d.original.traffic) >= parseInt(d.original.rate); })
现在这大部分都有效，除非线条交叉。如何在BETWEEN点之下的一条线下遮挡区域？它是基于点的阴影，我希望它基于线条阴影。如果我在线的一侧没有两个连续的点，我根本没有任何阴影。
由于您在交叉路口没有数据点，最简单的解决方案可能是获取每条线上下的区域并使用 clipPaths来弥补差异。
我假设你正在使用 d3.svg.line 绘制区域所基于的线条。这样我们就可以重复使用了 .x() 和 .y() 稍后区域的访问器功能：
var trafficLine = d3.svg.line()
.x(function(d) { return x(d3.time.format("%m/%d/%Y").parse(d.original.date)); })
.y(function(d) { return y(parseInt(d.original.traffic)); });
var rateLine = d3.svg.line()
.x(trafficLine.x()) // reuse the traffic line's x
.y(function(d) { return y(parseInt(d.original.rate)); })
您可以创建单独的区域函数来计算两条线上方和下方的区域。每行下方的区域将用于绘制实际路径，上面的区域将用作剪切路径。现在我们可以重新使用行中的访问器：
var areaAboveTrafficLine = d3.svg.area()
.x(trafficLine.x())
.y0(trafficLine.y())
.y1(0);
var areaBelowTrafficLine = d3.svg.area()
.x(trafficLine.x())
.y0(trafficLine.y())
.y1(height);
var areaAboveRateLine = d3.svg.area()
.x(rateLine.x())
.y0(rateLine.y())
.y1(0);
var areaBelowRateLine = d3.svg.area()
.x(rateLine.x())
.y0(rateLine.y())
.y1(height);
...哪里 height 是图表的高度，并假设 0 是图表顶部的y坐标，否则相应地调整这些值。
现在，您可以使用上面的区域函数来创建剪切路径，如下所示：
var defs = svg.append('defs');
defs.append('clipPath')
.attr('id', 'clip-traffic')
.append('path')
.datum(YOUR_DATASET)
.attr('d', areaAboveTrafficLine);
defs.append('clipPath')
.attr('id', 'clip-rate')
.append('path')
.datum(YOUR_DATASET)
.attr('d', areaAboveRateLine);
该 id 属性是必要的，因为我们需要在实际剪切路径时引用这些定义。
最后，使用区域下面的函数绘制svg的路径。这里要记住的重要一点是，对于下面的每个区域，我们需要剪辑到 对面 area-above，因此Rate区域将被剪裁 #clip-traffic 反之亦然：
// TRAFFIC IS ABOVE RATE
svg.append('path')
.datum(YOUR_DATASET)
.attr('d', areaBelowTrafficLine)
.attr('clip-path', 'url(#clip-rate)')
// RATE IS ABOVE TRAFFIC
svg.append('path')
.datum(YOUR_DATASET)
.attr('d', areaBelowRateLine)
.attr('clip-path', 'url(#clip-traffic)')
之后，您只需要为两个区域提供不同的填充颜色或任何您想要做的事情，以区别它们。希望有所帮助！