d3.js条形图与pos＆amp;每条记录的负数（赢/输）

Question

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

它有点像谷歌财务“部门摘要”图表（http://google.com/finance）

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

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

谢谢！

Answer 1

这是我能做的：

基础是每个项目有两个值。为简化起见，我们可以说所有值都必须为正值，第一个值将显示在右侧，第二个值将显示在左侧。

从example you provided开始，我们将绘制我们添加的第二个值：

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/