d3.js每条记录的pos和neg条形图（赢/亏）条形图

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()); 

此代码是绝对t复制粘贴从我替换d.value-d.value1和.bar.bar2的例子。

您还需要修改“75,50,25,0,25,50,75”的x轴格式。

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