改变 D3 条形图中特定条形之间的间隙

Question

I have a bar chart where I want to make the gap more pronounced between the 6th and the bar in my chart and the 12th and 13th bar in my chart. Right now I'm using .rangeRoundBands which results in even padding and there doesn't seem to be a way to override that for specific rectangles (I tried appending padding and margins to that particular rectangle with no success).

Here's a jsfiddle of the graph

And my code for generating the bands and the bars themselves:

    var yScale = d3.scale.ordinal()
                    .domain(d3.range(dataset.length))
                    .rangeRoundBands([padding, h- padding], 0.05);

    svg.selectAll("rect.bars")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("class", "bars")
                .attr("x", 0 + padding)
                .attr("y", function(d, i){
                    return yScale(i);
                })
                .attr("width", function(d) {
                    return xScale(d.values[0]);
                })
                .attr("height", yScale.rangeBand())

Answer 1

You can provide a function to calculate the height based on data and index. That is, you could use something like

.attr("height", function(d,i) {
            if(i == 5) {
                return 5;
            }
            return yScale.rangeBand();
        })

to make the 6th bar 5 pixels high. You can of course base this value on yScale.rangeBand() , ie subtract a certain number to make the gap wider.

Answer 2

Here's a function for D3 v6 that takes a band scale and returns a scale with gaps.

// Create a new scale from a band scale, with gaps between groups of items
//
// Parameters:
//       scale:            a band scale
//       where:            how many items should be before each gap?
//       gapSize:          gap size as a fraction of scale.size()
function scaleWithGaps(scale, where, gapSize) {
  scale = scale.copy();
  var offsets = {};
  var i = 0;
  var offset = -(scale.step() * gapSize * where.length) / 2;
  scale.domain().forEach((d, j) => {
    if (j == where[i]) {
      offset += scale.step() * gapSize;
      ++i;
    }
    offsets[d] = offset;
  });
  var newScale = value => scale(value) + offsets[value];
  // Give the new scale the methods of the original scale
  for (var key in scale) {
    newScale[key] = scale[key];
  }
  newScale.copy = function() {
    return scaleWithGaps(scale, where, gapSize);
  };
  return newScale;
}

To use this, first create a band scale...

let y_ = d3
  .scaleBand()
  .domain(data.map(d => d.name))
  .range([margin.left, width - margin.right])
  .paddingInner(0.1)
  .paddingOuter(0.5)

... then call scaleWithGaps() on it:

y = scaleWithGaps(y_, [1, 5], .5)

You can create a bar chart in the normal way with this scale.

Here is an example on Observable.