D3.js中条形图的取消对齐

// 数据准备
var data = [
  { category: "A", value: 10 },
  { category: "B", value: 20 },
  { category: "C", value: 15 },
  // 更多数据...
];

// 绘制坐标轴
var margin = { top: 20, right: 20, bottom: 30, left: 40 };
var width = 400 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;

var x = d3.scaleBand().range([0, width]).padding(0.1);
var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 创建条形图
x.domain(data.map(function(d) { return d.category; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);

svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.category); })
  .attr("y", function(d) { return y(d.value); })
  .attr("width", x.bandwidth())
  .attr("height", function(d) { return height - y(d.value); });

// 取消对齐
var fixedStartPoint = 50; // 固定起点的数值

svg.selectAll(".bar")
  .attr("x", fixedStartPoint)
  .attr("width", x.bandwidth() - fixedStartPoint);