所以我有一个图表绘制流量与日期和费率与日期.我试图遮住两条线之间的区域.但是,我想根据哪一行更高的颜色来遮蔽不同的颜色.以下作品没有最后的要求：
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)); })
但是,添加最后一个要求,我试图使用define()：
.defined(function(d){ return parseInt(d.original.traffic) >= parseInt(d.original.rate); })
现在这主要是工作,除了线交叉.如何在一行下方区域遮蔽？它是基于点的阴影,我希望它根据线条阴影.如果我的一边没有两个连续的点,我根本看不到任何阴影.
解决方法
由于您在交叉点没有数据点,所以最简单的解决方案可能是让每行上下各区域使用clipPath来裁剪差异.
我会假设你正在使用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属性是必要的,因为在实际剪切路径时需要引用这些定义.
最后,使用area-below函数来绘制svg的路径.这里要记住的重要事情是,对于以下每个区域,我们需要剪辑到上面的相对区域,因此,速率区域将根据#剪辑流量进行剪辑,反之亦然：
// 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)')
之后,您只需要给两个区域不同的填充颜色或任何你想做的来区分它们.希望有帮助！
