d3中的水平分割条形图答案

【问题标题】：horizontal split bar chart in d3d3中的水平分割条形图
【发布时间】：2020-08-12 11:49:16
【问题描述】：

我想使用 d3 创建一个拆分差异条形图，就像所附图片一样。我有 2 个输入数组，一个用于 y 轴标签，一个用于数据，如下所示：

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

我尝试了d3-observable。随意分叉这个可观察的。我坚持让嵌套数据按比例正确呈现。任何帮助将不胜感激。

谢谢

【问题讨论】：

看起来这些条形是表格的行。您不希望一次只有一个栏，这样您就可以使用普通的 HTML 了吗？您甚至可以通过绘制 <div> 来避免使用 SVG。然后，您可以更轻松地对齐列、突出显示悬停和点击事件

标签： javascript typescript d3.js data-visualization data-science

【解决方案1】：

您确实可以避免使用 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);

查看fiddle 以获取完整示例。如果您希望在悬停/单击时将任何“特殊效果”应用于整行，则需要根据元素索引分配一些通用类：.attr("class", (d, i) => `row${i}`)

【讨论】：