CODEWITHSUNDEEP
javascriptecmascript-6d3.js
DragonKnight
DragonKnight

Reputation: 1870

How to draw multiple bars in a row in a bar chart with spaces in between with d3v5?

In a chart similar to horizontal bar chart, I want to show multiple bars/boxes in each row with spaces between them. For example I want to show a three boxes in row-0 to illustrate the following data:

                            +--+  +-+ +---+
row-0: 3-5, 7-8, 9-11 ->    +--+  +-+ +---+  

                          +-+   +----+
row-1: 1-2, 5-9       ->  +-+   +----+

                               +-+   +--+
row-2: 4-5, 8-10      ->       +-+   +--+

Using d3.js v5

Upvotes: 1

Views: 214

Answers (1)

Ruben Helsloot
Ruben Helsloot

Reputation: 13129

I interpreted your question as a horizontal bar chart with gaps, so they all have the same height (and differ therefore from a histogram). This should be enough to get you on your way I think. The bar height is dynamic, based on the number of bar groups, and each bar group has an array of bar segments.

const barGroups = [
  [{ min: 0, max: 10 }, { min: 12, max: 15 }],
  [{ min: 10, max: 14 }],
  [{ min: 4, max: 6 }, { min: 8, max: 11 }],
  [{ min: 0, max: 8 }]
];

const margin = {
  left: 10,
  right: 10,
  top: 10,
  bottom: 40
};
padding = 2;

const width = 500, height = 150;
const barHeight = height / barGroups.length;
console.log(height, barHeight);

const svg = d3.select("svg")
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom);

const x = d3.scaleLinear()
    .rangeRound([0, width]);
const colors = ['darkred', 'darkgreen', 'darkblue'];

// The last value is the highest
x.domain([0, d3.max(barGroups.map((g) => g[g.length - 1].max))]);

svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + (height + margin.top) + ")")
  .call(d3.axisBottom(x))

const groupElements = svg.selectAll('.group')
  .data(barGroups)
  .enter()
  .append('g')
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .classed('group', true);

groupElements.each(function(_, i) {
  d3.select(this)
    .selectAll(".bar")
    .data((d) => d)
    .enter()
    .append("rect")
    .classed("bar", true)
    .attr("x", (d) => x(d.min))
    .attr("width", (d) => x(d.max - d.min))
    .attr("y", i * barHeight + padding)
    .attr("height", barHeight - 2 * padding)
    .attr("fill", colors[i % colors.length]);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>

<svg></svg>

Upvotes: 2

Related Questions