使用D3.js將條形圖分組為“一行”

Question

我正在嘗試使用D3.js制作特定的條形圖，但找不到任何可以匹配的示例。 我會編寫一個條形圖，在同一條線上放置兩個系列（一個為負，一個通常為正），但不要堆疊在一起。

我想可能還不太清楚，所以我在Highcharts上做了這個 。 我想使用D3將圖表與以前做過的地圖聯系起來。

那么，有人知道任何可以幫助我的例子嗎？ 即使我的序列是無序的，我也可以直接對圖表排序嗎？ 如果這兩個系列都准時出現，那那個小系列是否出現在最大系列的前面？

Answer 1

技巧是對數據進行排序，為此，可以使用[d3.ascending()][1]函數：

帶有以下示例數據：

data = [{
    name: "A",
    valueRight: 1,
    valueLeft: 2
}, {
    name: "B",
    valueRight: 4,
    valueLeft: 5
}, ...]

我們會有：

function leftBound(node) {
    return d3.max([node.valueLeft,-node.valueRight])
}

function rightBound(node) {
    return d3.max([node.valueRight,-node.valueLeft])
}
dataSort = function(a,b) {
    res = d3.descending(leftBound(a),leftBound(b))
    if(res==0) {
        return d3.descending(rightBound(a),rightBound(b))
    } else {
        return res
    }
}

對於可重復使用的圖表，您也可以使用[selection.sort()][2]但必須對2個條形類別執行此操作。

JsFiddle： http : //jsfiddle.net/vgZ6E/55/

屏幕截圖：

原始代碼來自以下問題： d3.js條形圖，每條記錄具有正負條形（獲利/虧損）