d3中的水平分割条形图

Question

I would like to create a split difference bar chart using d3 like the attached image. I have 2 input arrays one for y-axis labels and one for data as below:

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

I tried my hands in d3-observable . Feel free to fork this observable.I am stuck at getting the nested data rendered properly with scale. Any help would be much appreciated.

Thanks

Answer 1

You can indeed avoid SVG and use vanilla HTML to draw a chart like that. Of course, this doesn't mean you can't use d3 to make your life easier - it has methods to simplify the handling of scales, date formatting and the creation of elements which isn't in any way restricted to SVG. For example, you can create the first bar chart and its label like so:

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);

Have a look at this fiddle for the full example. If you want any "special effects" to apply to the entire row on hover / click, you'd need to assign some common class based on the element index: .attr("class", (d, i) => `row${i}`)