d3.js条形图与pos&负杠（胜/亏）每个记录 [英] d3.js bar chart with pos & neg bars (win/loss) for each record

问题描述

我想在d3.js中为每个项目或行都创建一个条形图，例如：

它有点像google financeSector Summary图表（

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

谢谢！

解决方案

这里是我能做的：

>

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

从您提供的示例 ，我们将绘制我们添加的第二个值：

  data = [
 {name：A ：1，value2：2}，
 ... 
] 
  

也可以修复域（你可以编写一个函数，以后很好地做）：

  x.domain（[ -  10， 10]）
  

最后，我们将绘制第二个小节（左侧）：

  svg.selectAll（。bar2）
 .data（data）
 .enter rect）
 .attr（class，bar2）
 .attr（x，function（d）{
 return x（Math.min value2））; 
}）
 .attr（y，function（d）{
 return y（d.name）; 
}）
 .attr （width，function（d）{
 return Math.abs（x（-d.value2） -  x（0））; 
}）
 .attr y.rangeBand（））; 
  

此代码只是从我替换 d.value的示例复制粘贴由 -d.value1 和 .bar 由 .bar2 。

您还必须修改具有75，50，25，0，25，50，75的x轴格式。

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

I want to make a bar chart in d3.js that has both positive and negative bars for each item or row, like this:

it's somewhat like the google finance "Sector Summary" chart (http://google.com/finance)

Can anyone point me to a d3.js example of this kind of chart? I am aware of the "bar chart with negative values" example here: http://bl.ocks.org/mbostock/2368837

If there is a relatively easy way to explain how to modify that example to accomplish what I want, that could work too.

Thanks!

解决方案

Here is what I could do:

The basis is to have two values per item. To simplify things we can say that all values have to be positive, the first one will be displayed on the right, the second one on the left.

From the example you provided, we will just plot the second value we add:

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

We will also fix the domain (you can write a function to do it nicely afterwards):

x.domain([-10,10])

Finally, we will draw the second bars (on the left):

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

This code is just copy paste from the example where I replaced d.value by -d.value1 and .bar by .bar2 for the class.

You will also have to modify the x-axis format for having "75, 50, 25, 0, 25, 50, 75".

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

这篇关于d3.js条形图与pos&负杠（胜/亏）每个记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！