d3.js 条形图，每条记录带有 pos 和 neg 条（赢/输）答案

【问题标题】：d3.js bar chart with pos & neg bars (win/loss) for each recordd3.js 条形图，每条记录带有 pos 和 neg 条（赢/输）
【发布时间】：2013-10-14 17:24:46
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

标签： d3.js bar-chart

【解决方案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/

【讨论】：

我们可以在 X 轴上绘制它吗？