如何解决d3中的水平拆分条形图
我想使用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}`)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。