与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 bar类别执行此操作。

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

截图：

原始代码来自以下问题：d3.js bar chart with pos & neg bars (win/loss) for each record