Javascript d3中的水平分割条形图

我想创建一个分裂差异条形图使用d3一样附加的图像。我有两个输入阵列，一个用于y轴标签，另一个用于数据，如下所示：

data = [[35,90], [60,45], [80,90], [95,90]]
months = ["Jan - 20", "Feb - 20", "Mar - 20", "Apr -20"]

我试了试。请随意使用这个可观察对象。我一直在用scale正确地呈现嵌套数据。任何帮助都将不胜感激

---

谢谢

您确实可以避免使用SVG，而使用普通HTML来绘制这样的图表。当然，这并不意味着你不能使用d3来简化你的生活-它有一些方法来简化比例的处理、日期格式和元素的创建，而这些都不局限于SVG。例如，您可以创建第一个条形图及其标签，如下所示：

d3.select("#first-bar-column")
    .selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .style("width", d => `${xScale(+d.A)}px`)
    .classed("first-bar", true)
    .append("p")
    .classed("label", true)
    .text(d => d.A);

---

看看这个完整的例子。如果您想在鼠标悬停/单击时对整行应用任何“特殊效果”，则需要根据元素索引分配一些公共类：

.attr（“class”，（d，i）=>`row${i}`）

，看起来这些条是表中的行。您是否希望一次只使用一个条以便可以使用普通HTML？您甚至可以通过绘制

来避免SVG。然后，您可以对齐列，在悬停时高亮显示，并更轻松地单击事件