使用堆疊佈局將自定義值字段映射到x值

我成功映射了y值，但在使用stack layout創建堆疊條形圖時，我無法將x值映射到我的值上的任意字段。我對Javascript和d3不是很熟悉;所以我可能在這裏缺少一些基本的東西。我的數組數組中的值看起來像{ "xInit": 0, "yInit": 91 }。我想在圖中將xInit映射到x，並且將yInit映射到y。使用堆疊佈局將自定義值字段映射到x值

此作品（suggested by Bryan Clark）：

var st = d3.layout 
      .stack() 
      .values(function (d) { return d.values; }) 
      .y(function (v, i) { return v.yInit; }) 
      .out(function (d, y0, y) { d.x = d.xInit; d.y0 = y0; d.y = y; });

This works, the x coords are taken from value.xInit

這並不：

var st = d3.layout.stack() 
      .values(function (d) { return d.values; }) 
      .y(function (v, i) { return v.yInit; }) 
      .x(function (v, i) { return v.xInit; });

Fail! value.x returns NaN

它提供了以下警告：

Unexpected value translate(NaN,0) parsing transform attribute. 
Unexpected value NaN parsing x attribute.

我在這兒錯誤地使用stack.x([accessor])？那麼我應該如何使用它？基於此gist一個block

詳細

顯示我的問題，一個完整的例子是可用的。我想創建一個基於以下數據堆積條形圖：

initialData = [ { 
      "name": "apples", 
      "values": [{ "xInit": 0, "yInit": 91 }, { "xInit": 1, "yInit": 290 }, { "xInit": 2, "yInit": 120 }] 
     },{ 
      "name": "oranges", 
      "values": [{ "xInit": 0, "yInit": 9 }, { "xInit": 1, "yInit": 49 }, { "xInit": 2, "yInit": 37 }] 
     }];

來源

2012-07-13 Marijn

我並不完全清楚你想在這裏做什麼，所以這不是一個完整的解決方案，但我會幫你走吧。

您可以使用out()函數處理輸出數據，以獲得您要查找的x座標，從而使圖形發生。

var st = d3.layout.stack() 
     .values(function(d) { return d.values; }) 
     .out(function(d, y0, y) {d.x = d.xInit; d.y0 = y0; d.y = y; }) 
     .y(function (v, i) { return v.yInit; });

來源

2012-07-16 21:09:46

這有幫助;什麼時候應該使用'out'函數而不是'x'函數？ Afaik out函數用於指定「如何將計算出的基線傳播到上面的層」。而'x'函數指定「如何訪問每個值的位置的x座標」。 – Marijn 2012-07-17 06:55:19

+1讓我走:) – Marijn 2012-07-17 07:40:34

stack（）將數據作爲一個對象返回，它使用'.x（）'和'.y（）'訪問器執行了一些轉換。一旦你獲得了數據，你的代碼就會假設'd.x'將會是可用的，而事實上它只會是'd.xInit'。從本質上講，當你真正擁有被堆棧函數轉換的惰性數據時，你似乎將它當作堆棧類來對待。您需要通過更改訪問xInit或out函數來修復傳播的數據。我希望這是有道理的。 – 2012-07-17 19:29:11

使用堆疊佈局將自定義值字段映射到x值

回答

相關問題