我想在 d3.js 中制作一个条形图,其中每个项目或行都有正负条,如下所示:
这有点像谷歌金融“部门摘要”图表(http://google.com/finance)
谁能指出我这种图表的 d3.js 示例?我在这里知道“带有负值的条形图”示例:http: //bl.ocks.org/mbostock/2368837
如果有一种相对简单的方法来解释如何修改该示例以完成我想要的,那也可以。
谢谢!
我想在 d3.js 中制作一个条形图,其中每个项目或行都有正负条,如下所示:
这有点像谷歌金融“部门摘要”图表(http://google.com/finance)
谁能指出我这种图表的 d3.js 示例?我在这里知道“带有负值的条形图”示例:http: //bl.ocks.org/mbostock/2368837
如果有一种相对简单的方法来解释如何修改该示例以完成我想要的,那也可以。
谢谢!
这是我能做的:
基础是每个项目有两个值。为简化起见,我们可以说所有值都必须是正数,第一个显示在右侧,第二个显示在左侧。
从您提供的示例中,我们将仅绘制我们添加的第二个值:
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/