Javascript 使用d3对两条线之间的区域进行着色

所以我有一张图表，画出了交通量与日期的对比，以及费率与日期的对比。我正试图给这两条线之间的区域遮阴。但是，我想根据哪条线更高，给它着色一种不同的颜色。无最后要求的以下工程：

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（）

---

现在，这主要是有效的，除了线交叉的时候。如何在点与点之间的一条线下对区域进行着色？它是基于点的着色，我希望它基于线着色。如果在直线的一侧没有两个连续点，则根本不会得到任何着色。

因为在交点处没有数据点，最简单的解决方案可能是获得每条直线上方和下方的区域，然后使用

clipPath

s裁剪差异

我假设您正在使用

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的路径。这里需要记住的重要一点是，对于下面的每个区域，我们需要剪裁到上面的相反区域，因此费率区域将根据

#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)')

之后，您只需要为这两个区域指定不同的填充颜色，或者您想做的任何事情来区分它们。希望有帮助

您好，上面的代码笔有您提到的类似示例。但是我可以对上面的区域进行着色，但不能对下面的区域进行着色。有什么帮助吗？

// 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)')