D3 - 在内部柱状图之间添加空格

在D3中，在内部柱状图之间添加空格可以通过调整x轴的比例尺来实现。以下是一个示例代码：

// 创建画布
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 300);

// 数据
var data = [5, 10, 15, 20, 25];

// 定义x轴比例尺
var xScale = d3.scaleBand()
  .domain(data.map(function(d, i) { return i; }))
  .range([0, 400])
  .paddingInner(0.2) // 设置内部柱状图之间的空隙

// 绘制柱状图
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return xScale(i); })
  .attr("y", function(d) { return 300 - d * 10; })
  .attr("width", xScale.bandwidth())
  .attr("height", function(d) { return d * 10; })
  .attr("fill", "steelblue");

在上述代码中，使用d3.scaleBand()创建了一个比例尺，使用paddingInner()方法设置了内部柱状图之间的空隙。然后，使用xScale()函数来计算每个柱状图的x坐标，并设置其宽度为xScale.bandwidth()。

以上代码将创建一个包含5个柱状图的内部柱状图，它们之间有一些空隙。请根据实际情况进行调整和修改。