從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元素綁定的「前景」區域：

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