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

Question

I'm trying to make a particular bar chart with D3.js, and I don't find any example who could match. I would code a bar chart with two series (one negative, and one generally positive) disposed on the same line, but not stacked.

I guess that maybe it's not very clear, so I've made this on Highcharts . I want to use D3 to connect the chart with a map I did before.

So, does someone know any example that could help me? Can I sort directly the chart even if my series are unordered? And if the two series are punctually postive, does the little one appear in front of the largest?

Answer 1

The trick is to order your data, in order to do so, you can use the [d3.ascending()][1] functions:

with the following example data:

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

We would have:

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
    }
}

For reusable charts, you can also use [selection.sort()][2] but you have to do this for the 2 bar categories.

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

ScreenShot:

The original code is from the following question: d3.js bar chart with pos & neg bars (win/loss) for each record