D3如何在两个y数据之间绘制带有x数据的图表

【问题标题】：D3 how to draw chart with a x data between two y dataD3如何在两个y数据之间绘制带有x数据的图表
【发布时间】：2014-08-03 17:25:26
【问题描述】：

我想绘制可以将 x 设置在两个 y 之间的图表，例如，我想绘制一个带有 x=100 and y1=200 , y2=500 的图表，只是具有良好细节的垂直线，哪个图表可以为我做到这一点类似这张图片的东西

具体的 x 和 y 我应该用哪个图表来绘制这个

【问题讨论】：

我认为没有专门的现成图表，但用 D3 做应该没有问题。
似乎最容易修改的是某种类型的散点图/点图。这不是一个真正适合 SO 的问题，因为它相当广泛/基于意见。
您可以在 D3 中通过设置线性范围/域来做到这一点。
@Incodeveritas 我是 d3 新手，你能说得更具体点吗？？

标签： javascript d3.js charts

【解决方案1】：

这里你可以看到如何使用 d3.js 制作条形图

Bar chart using d3

现在你想要实现的东西叫做浮动条形图。虽然 d3 中没有任何现成的浮动条形图可用。但是我们可以通过对条形图本身做一些改变来实现它。在上面的例子中，当我们在 bar 类中添加 Rectangle 时，只需将 height 属性更改为

 .attr("height", function(d) { return height - y(d.higher-d.lower)

通过这种方式，它给出了从低点到高点的矩形。 Json就是这种格式

var jsonData=[
 {"letter": "A", "higher": .08,"lower": .05},
 {"letter": "B", "higher": .05,"lower": .03},
 {"letter": "C", "higher": .04,"lower": .02}   
]

SEE DEMO HERE

要学习 d3.js，请关注 link

【讨论】：