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/