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

Question

我想绘制可以在两个 y 之间设置 x 的图表 例如我想用 x=100 和 y1=200 , y2=500 绘制一个图表可以帮我做像这张图片

有了特定的 x 和 y 我应该用哪个图表来绘制这个

Answer 1

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

Bar chart using d3

现在你想要实现的东西叫做 float 条形图。虽然 d3 中没有现成的 float 条形图。但是我们可以通过对条形图本身做一些改变来实现它。在上面的例子中，当我们在 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