1

我有一个条形图，我想让图表中第 6 条和第 13 条条之间的差距更加明显。现在我正在使用.rangeRoundBands它导致均匀的填充，并且似乎没有一种方法可以为特定的矩形覆盖它（我尝试将填充和边距附加到那个特定的矩形但没有成功）。

这是图表的jsfiddle

还有我生成波段和条本身的代码：

    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())
4

2 回答 2

0

您可以提供一个函数来根据数据和索引计算高度。也就是说，你可以使用类似的东西

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

使第 6 条 5 像素高。您当然可以将此值基于yScale.rangeBand()，即减去某个数字以使差距更大。

于 2013-08-26T13:34:43.557 回答
0

这是 D3 v6 的一个函数，它采用带刻度并返回带间隙的刻度。

// 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;
}

要使用它，首先创建一个乐队规模......

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

...然后调用scaleWithGaps()它：

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

您可以使用此比例以正常方式创建条形图。

这是 Observable 的一个例子。

于 2021-08-20T09:22:25.483 回答