d3中的水平拆分条形图

编程问答 2022-10-26

问题描述

enter image description here

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

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

我尝试过d3-observable。随意分叉这个可观察的对象。我坚持使用比例尺正确渲染嵌套数据。任何帮助将不胜感激。

谢谢

解决方法

您确实可以避免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}`)

data-sciencedata-visualizationjavascripttypescripttypescript