使用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条形图，每条记录具有正负条形（获利/亏损）