d3.js条形图，每个记录都有pos & neg条(赢/输)

Question

我想在d3.js中创建一个条形图，它对每一项或每一行都有正反两条，如下所示：

​

​

这有点像谷歌财务“部门摘要”图表(http://google.com/finance)

​

​

有人能告诉我这种图表的d3.js例子吗？我知道这里有“带负值条形图”的例子：http://bl.ocks.org/mbostock/2368837

如果有一种相对简单的方法来解释如何修改这个示例以实现我想要的，那么这也是可行的。

谢谢!

Answer 1

以下是我能做的：

​

​

其基础是每项有两个值。为了简化事情，我们可以说所有的值都必须是正的，第一个将显示在右边，第二个显示在左边。

在你提供的例子中，我们只绘制我们添加的第二个值：

data = [
    {name: "A",value: 1,value2: 2},
    ...
]

我们还将修复域(之后可以编写一个函数来很好地完成它)：

x.domain([-10,10])

最后，我们将画第二个条形图(左边)：

svg.selectAll(".bar2")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar2")
    .attr("x", function (d) {
    return x(Math.min(0, -d.value2));
})
    .attr("y", function (d) {
    return y(d.name);
})
    .attr("width", function (d) {
    return Math.abs(x(-d.value2) - x(0));
})
    .attr("height", y.rangeBand());

这段代码只是从示例中复制粘贴，在这个示例中，我将d.value替换为-d.value1，将.bar替换为类的.bar2。

您还必须修改x轴格式，使之具有"75、50、25、0、25、50、75“。

jsFiddle：http://jsfiddle.net/chrisJamesC/vgZ6E/