使用 D3.js 将“一行”分组条形图

Question

我正在尝试使用 D3.js 制作特定的条形图，但找不到任何可以匹配的示例。我会编写一个条形图，其中两个系列（一个负数，一个通常为正数）布置在同一条线上，但不堆叠。

我猜可能不是很清楚，所以I've made this on 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 bar chart with pos & neg bars (win/loss) for each record