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

Question

我想要绘制一个图表，它可以在两个y之间设置x，例如，我想用x=100 and y1=200 , y2=500绘制一个图表，用垂直线，有很好的细节，哪个图表可以为我做一些类似于这张图像的事情。

​

用特定的x和y来绘制这个图表。

Answer 1

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

使用d3的条形图

现在，您想要实现的东西叫做浮动条Chart.Although，在d3中没有现成的浮动条形图可用。但是，我们可以通过对条形图本身进行某些更改来实现这一点。在上面的示例中，当我们在bar类中附加矩形时，只需将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}   
]

参见这里的演示

为了学习d3.js，请遵循下面的链接