是否有可能爲NVD3創建區域的焦點圖表？

Question

NVD3是一個基於D3構建的JavaScript庫包裝器。它提供了使用Crossfilter爲折線圖創建畫筆效果。下面

參考： http://nvd3.org/ghpages/lineWithFocus.html

很想知道是否有可能建立一個類似刷牙/集中的區域圖表效果或分散呢？請幫助我。

Answer 1

我是NVD3的新手（截至昨天），有點經驗D3，但絕不是高級用戶。我一直在處理同樣的問題，爲自己找到了一個可能有所幫助的快樂解決方案。首先，由於您提到使用類似的焦點/上下文界面來製作「散點圖」，您應該知道LineWithFocus圖表所構建的nvd3.models.line對象本身實際上建立在nvd3.models.scatter上。我發現這一點是因爲爲了得到一個折線圖來顯示實際上必須使用的時間尺度的x軸標籤：chart.lines.scatter.xScale(d3.time.scale());

現在，至於顯示填充區域的折線圖，可以將@AmeliaBR評論，使用內置的chart.isArea(true)（實際上我發現它更好地設置lines.isArea(true); lines2.isArea(true);。這會在底下產生完全填充的行，但正如@AmeliaBR所提到的那樣，相互作用會導致一些問題，並且對於我而言，這些行會互相填充。看起來更像是一個流圖，它最終變得非常簡單，我的線條很有序（跟蹤最小值，平均值和相同數據的最大值），這可能不是一回事，所以也許你我需要增加一些額外的工作來正確設置數據，以填補您的想法。當我讀取數據時，我對每一行設置y和Y0值，如下所示：

var line_data = [ 
     {key: "minimum", values: []}, 
     {key: "average", values: []}, 
     {key: "maximum", values: []}]; 
    data.forEach(function(d) { 
    var date = new Date(+d.epoch*1000); //new Date(+d.epoch*1000); 
    line_data[0]["values"].push({x: date, y: +d.minimum, y0: +d.average }); 
    line_data[1]["values"].push({x: date, y: +d.average, y0: +d.average }); 
    line_data[2]["values"].push({x: date, y: +d.maximum, y0: +d.average }); 
}); 

這將設置它，使得數據在那裏畫出兩個形狀在三線之間填充，一個最小值和平均值之間的（有色像最小值）和平均值和最大值之間的一個（像最大值一樣着色）。爲了讓代碼使用這些數據，我通過將nv.d3.js源代碼的完整定義複製到我自己的文件中，然後重載了nv.models.line對象定義，並進行了以下更改：

1. 在頂部，我添加了一個getY0函數的getX和功能的getY仿照：

   getX = function(d) { return d.x }

   getY = function(d) { return d.y }

   getY0 = function(d) { return d.y0 }

2. 稍微降低一點，您會發現areaPaths = groups.selectAll('path.nv-area')的定義，並且在另一個塊的下方開始areaPaths.transition()。在兩個地方都進行相同的attr('d',...)調用。在這兩個地方你都需要做出同樣的改變。

相反的：.y1(function(d,i) { return y0(y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0]) })

用途：.y1(function(d,i) { return nv.utils.NaNtoZero(y(getY0(d,i))) })

你會發現，該行現在看起來幾乎完全一樣的一個上面：

.y0(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })

將y0更改爲y：

'.y0(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })

說明：

你.y0定義的區域是從所述行數據d.y值 你.y1定義的區域是從線數據

的y0()的d.y0值調用包裝getY實際上是對使用的比例的參考。如果從areaPaths在nv.models.line定義查找了一下，你會發現存在這樣的情況，這些被定義註釋：var x0, y0 //used to store previous scales

如果我原來在Y0左（）的包裝，我發現圖最初出現我想如何，但沒有正確更新。當我將這些函數中的所有y0包裝都更改爲y，並且使它們更新爲當前比例而非之前的比例。自那以後沒有任何問題。