Javascript 分组条形图“；“在一行中”；使用D3.js

我试图用D3.js制作一个特殊的条形图，但我找不到任何可以匹配的示例。我会用两个系列（一个是负数，一个是正数）编码一个条形图，它们放在同一条线上，但不堆叠

我想可能不太清楚，所以。我想用D3把图表和我以前做过的地图连接起来

---

那么，有人知道任何可以帮助我的例子吗？即使我的系列是无序的，我也可以直接对图表排序吗？如果这两个序列都是正点的，那么小的序列会出现在最大的序列前面吗？

诀窍是对数据进行排序，为此，您可以使用

[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：

截图：

---

原始代码来自以下问题：

？嗨，拉尔斯，谢谢你的链接。你们的例子和我想写的非常接近，但我在寻找一个系列的东西！