javascript - 从 D3 线插值器函数中获取值

Question

我正在构建一个 D3 图，其中包含一个中间的阴影区域。阴影区域顶部与折线图匹配。

数据看起来像这样:

line = [
  {x: 0, y:1},
  {x: 1, y:2},
  {x: 2, y:4},
  {x: 3, y:6},
  {x: 4, y:3},
  {x: 5, y:1}]

并且该图使用了“基数”插值函数:

g = d3.svg.line()
  .interpolate('cardinal')

为了对图表下方的区域进行阴影处理，我只创建了一个 d3.svg.area() 并为其提供了阴影区域的等效数据，例如(在 x=2 和 x=4 之间进行阴影处理):

area = [
  {x: 2, y:4},
  {x: 3, y:6},
  {x: 4, y:3}]
a = d3.svg.area()
 .interpolate('cardinal')

，但我的问题是我想在 1.5 到 3.5 之间的图形下遮蔽区域，在进行“基数”插值后我不知道这些区域的值。

所以，我需要弄清楚如何 a) 对数据应用基数插值，然后选择 1.5 和 3.5 的值，或者 b) 从 d3 中提取线数据并使用它来构建数据面积图。

对于 a) 我看过 d3.interpolate，但它看起来与 d3.line.interpolate() 不同，并且不允许您传递插值方法。

对于 b) 我不知道如何在插值后从行中提取数据......它在 D3 中的任何地方都没有记录。

Answer 1

考虑以不同的方式解决这个问题:您可以使用 svg clipPath元素任意裁剪路径，允许您放弃任何内插值的计算。

绘制区域的两个版本，一个使用背景样式，另一个使用前景，然后创建一个矩形 clipPath 元素来绑定(bind)“前景”区域:

js:

svg.append("clipPath")
    .attr("id", "clipRect")
  .append("rect")
    .attr("x", x(1.5))
    .attr("width", x(2))
    .attr("height", height);

CSS:

.foreArea {clip-path: url(#clipRect);}

参见，例如:http://bl.ocks.org/jsl6906/89ef40de1d8808d04f42