負JSON數據堆積條形圖

我想實現堆疊條形圖。我的數據源是JSON數組。數據可能爲負數或正數。我引用這個鏈接負JSON數據堆積條形圖

http://bl.ocks.org/ZJONSSON/2975320

但問題是，這裏使用類似矩陣式的數據。像：

var data = [[{y:3},{y:6},{y:-3}], 
      [{y:4},{y:-2},{y:-9}], 
      [{y:10},{y:-3},{y:4}] 
      ]

我有同樣的數據，但在JSON數組，如：

var data = [{x:"abc", y1:"3", y2:"4", y3:"10"}, 
      {x:"abc2", y1:"6", y2:"-2", y3:"-3" }, 
      {x:"abc3", y1:"-3", y2:"-9", y3:"4"} 
      ]

現在我的問題是我如何可以實現此圖與JSON格式的數據。

來源

2013-05-08 goldenbutter

我不知道我理解的問題。您發佈的任一代碼塊都可以用[JSON]（http://json.org/）表示。爲什麼你想要屬性值是字符串而不是數字？ – 2013-05-08 21:46:02

你可以看看這個答案過於：http://stackoverflow.com/questions/15388481/d3-js-histogram-with-positive-and-negative-values/15391554#15391554 – 2013-05-09 04:57:02

在您鏈接的例子中，原始數據的工作按頻段類型分組。您的數據被分組由設置 - 也就是說，在原來的各顏色帶在數據陣列中的分組。在您的數據中，每個波段堆棧是數據陣列中的一組對象。

如果你想重新使用原來的代碼，我們需要像這樣的數據（90度）翻譯：

var initialData = [{x:"abc", y1:"3", y2:"4", y3:"10"}, 
        {x:"abc2", y1:"6", y2:"-2", y3:"-3" }, 
        {x:"abc3", y1:"-3", y2:"-9", y3:"4"}] 

var data = ["y1","y2","y3"].map(
    function(v){ 
     return initialData.map(function(d){ 
     return {y: +d[v]}; 
    }); 
});

然後，大部分的原代碼，可以原樣使用。

，你可以適應另一部分是X-規模

x = d3.scale.ordinal() 
     .domain(['abc','abc2','abc3']) 
     .rangeRoundBands([margin,w-margin], .1)

組名是硬編碼的域名，但你有他們在你的對象爲「×」。

相反，我們可以自動使用每個對象的x值作爲標籤每組：

x = d3.scale.ordinal() 
    .domain(initialData.map(function(d){return d.x})) 
    .rangeRoundBands([margin,w-margin], .1)

全部放在一起，有一些額外的價值：http://jsfiddle.net/fLMAZ/1/

的另一種選擇是重寫代碼以按原樣綁定數據，但您需要了解如何構建堆疊條形圖，然後將其調整爲原始JSON。

來源

2013-05-09 02:43:24 minikomi

哇...這就是完美的。 .....正是我需要這個輸出。非常感謝@minikomi 只是一個更多的...如果我想顯示在每個堆棧鼠標懸停的堆棧值..有可能?? – goldenbutter 2013-05-09 09:06:55

是的 - 看看使用selection.on在事件上添加鼠標 – minikomi 2013-05-09 09:59:53

你有一些關於@minikomi的例子嗎？ – goldenbutter 2013-05-09 14:04:38

你有兩個選擇：

是提供從服務器端的數據，使它看起來像繪製喜歡的JSON結構。
您可以通過在客戶端上你的JSON解析，並作出新的JSON
您可以修改曲線示意圖等，它將與你的JSON

來源

2013-05-09 02:37:33 theswiss

負JSON數據堆積條形圖

回答

相關問題