D3.js 是否在d3v4堆叠条形图中的堆栈之间添加空间？

这是我试过的代码。我试着给g和x加上填充物。它似乎不起作用。我只需要一个带有工具提示的水平单堆叠条形图。我可以稍后添加工具提示，但我只需要有人帮我解决这个问题。我在这件事上挣扎了太久。下面是我正在使用的数据

d3.json("data2.json", function(error, data) {
  data.forEach(function(d) {
    d.Total = +d.Total;
  });

  var width = 200,
    height = 50;

  var margin = {
    top: 10,
    right: 10,
    bottom: 30,
    left: 10
  };

  var svg = d3.select('body')
    .append('svg')
    .attr('width', '20%')
    .attr('height', '20%')
    .attr('viewBox', '0 0 ' + width + ' ' + height)
    .append('g');

  width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

  svg.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


  var xScale = d3.scaleLinear()
    .range([0, width])

  var yScale = d3.scaleBand()
    .range([0, height])
    .padding(0.1);

  xScale.domain([0, d3.sum(data, function(d) {
    return d.Total;
  })]);

  var x_axis = svg.append('g')
    .attr('class', 'axis')
    .attr('padding', 1)
    .attr('transform', 'translate(' + 0 + ',' + height + ')');

  var keys = data.map(function(d) {
    return d.Type;
  });

  var newData = [{}];

  data.forEach(function(d) {
    newData[0][d.Type] = d.Total
  });

  var stack = d3.stack()
    .keys(keys);

  var series = stack(newData);

  var colorScale = d3.scaleOrdinal()
    .domain([0, 12])
    .range(d3.schemeCategory10);

  var bars = svg.selectAll()
    .data(series)
    .enter()
    .append('g')
    .attr('fill', function(d) {
      return colorScale(d.key);
    })
    .selectAll('rect')
    .data(function(d) {
      return d;
    })
    .enter()
    .append('rect')
    .attr('x', function(d, i) {
      return xScale(d[0]) ;
    })
    .attr('width', function(d, i) {
      return xScale(d[1]) - xScale(d[0]);
    })
    .attr("height", yScale.bandwidth());

});

---

我发现的最简单的方法是从使用x轴映射对象xScale获得的条的宽度中减去几个像素。可以保持x和y的定位值不变。因此，您可以更改这一行：

d3.json("data2.json", function(error, data) {
  data.forEach(function(d) {
    d.Total = +d.Total;
  });

  var width = 200,
    height = 50;

  var margin = {
    top: 10,
    right: 10,
    bottom: 30,
    left: 10
  };

  var svg = d3.select('body')
    .append('svg')
    .attr('width', '20%')
    .attr('height', '20%')
    .attr('viewBox', '0 0 ' + width + ' ' + height)
    .append('g');

  width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

  svg.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


  var xScale = d3.scaleLinear()
    .range([0, width])

  var yScale = d3.scaleBand()
    .range([0, height])
    .padding(0.1);

  xScale.domain([0, d3.sum(data, function(d) {
    return d.Total;
  })]);

  var x_axis = svg.append('g')
    .attr('class', 'axis')
    .attr('padding', 1)
    .attr('transform', 'translate(' + 0 + ',' + height + ')');

  var keys = data.map(function(d) {
    return d.Type;
  });

  var newData = [{}];

  data.forEach(function(d) {
    newData[0][d.Type] = d.Total
  });

  var stack = d3.stack()
    .keys(keys);

  var series = stack(newData);

  var colorScale = d3.scaleOrdinal()
    .domain([0, 12])
    .range(d3.schemeCategory10);

  var bars = svg.selectAll()
    .data(series)
    .enter()
    .append('g')
    .attr('fill', function(d) {
      return colorScale(d.key);
    })
    .selectAll('rect')
    .data(function(d) {
      return d;
    })
    .enter()
    .append('rect')
    .attr('x', function(d, i) {
      return xScale(d[0]) ;
    })
    .attr('width', function(d, i) {
      return xScale(d[1]) - xScale(d[0]);
    })
    .attr("height", yScale.bandwidth());

});

[
  {
    "Type": "Pending Review",
    "Total": 3209,
    "Percent": "23.90%"
  },
  {
    "Type": "Audit Finding",
    "Total": 2715,
    "Percent": "20.22%"
  },
  {
    "Type": "No Issues",
    "Total": 1675,
    "Percent": "12.50%"
  }
]

像这样：

d3.json("data2.json", function(error, data) {
  data.forEach(function(d) {
    d.Total = +d.Total;
  });

  var width = 200,
    height = 50;

  var margin = {
    top: 10,
    right: 10,
    bottom: 30,
    left: 10
  };

  var svg = d3.select('body')
    .append('svg')
    .attr('width', '20%')
    .attr('height', '20%')
    .attr('viewBox', '0 0 ' + width + ' ' + height)
    .append('g');

  width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

  svg.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


  var xScale = d3.scaleLinear()
    .range([0, width])

  var yScale = d3.scaleBand()
    .range([0, height])
    .padding(0.1);

  xScale.domain([0, d3.sum(data, function(d) {
    return d.Total;
  })]);

  var x_axis = svg.append('g')
    .attr('class', 'axis')
    .attr('padding', 1)
    .attr('transform', 'translate(' + 0 + ',' + height + ')');

  var keys = data.map(function(d) {
    return d.Type;
  });

  var newData = [{}];

  data.forEach(function(d) {
    newData[0][d.Type] = d.Total
  });

  var stack = d3.stack()
    .keys(keys);

  var series = stack(newData);

  var colorScale = d3.scaleOrdinal()
    .domain([0, 12])
    .range(d3.schemeCategory10);

  var bars = svg.selectAll()
    .data(series)
    .enter()
    .append('g')
    .attr('fill', function(d) {
      return colorScale(d.key);
    })
    .selectAll('rect')
    .data(function(d) {
      return d;
    })
    .enter()
    .append('rect')
    .attr('x', function(d, i) {
      return xScale(d[0]) ;
    })
    .attr('width', function(d, i) {
      return xScale(d[1]) - xScale(d[0]);
    })
    .attr("height", yScale.bandwidth());

});

.attr('width', function(d, i) {
  return xScale(d[1]) - xScale(d[0]);
})

2完成了这个任务

d3.json("data2.json", function(error, data) {
  data.forEach(function(d) {
    d.Total = +d.Total;
  });

  var width = 200,
    height = 50;

  var margin = {
    top: 10,
    right: 10,
    bottom: 30,
    left: 10
  };

  var svg = d3.select('body')
    .append('svg')
    .attr('width', '20%')
    .attr('height', '20%')
    .attr('viewBox', '0 0 ' + width + ' ' + height)
    .append('g');

  width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

  svg.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


  var xScale = d3.scaleLinear()
    .range([0, width])

  var yScale = d3.scaleBand()
    .range([0, height])
    .padding(0.1);

  xScale.domain([0, d3.sum(data, function(d) {
    return d.Total;
  })]);

  var x_axis = svg.append('g')
    .attr('class', 'axis')
    .attr('padding', 1)
    .attr('transform', 'translate(' + 0 + ',' + height + ')');

  var keys = data.map(function(d) {
    return d.Type;
  });

  var newData = [{}];

  data.forEach(function(d) {
    newData[0][d.Type] = d.Total
  });

  var stack = d3.stack()
    .keys(keys);

  var series = stack(newData);

  var colorScale = d3.scaleOrdinal()
    .domain([0, 12])
    .range(d3.schemeCategory10);

  var bars = svg.selectAll()
    .data(series)
    .enter()
    .append('g')
    .attr('fill', function(d) {
      return colorScale(d.key);
    })
    .selectAll('rect')
    .data(function(d) {
      return d;
    })
    .enter()
    .append('rect')
    .attr('x', function(d, i) {
      return xScale(d[0]) ;
    })
    .attr('width', function(d, i) {
      return xScale(d[1]) - xScale(d[0]);
    })
    .attr("height", yScale.bandwidth());

});

---

好办法！你也可以给矩形一个笔划：白色；笔画宽度：1px；如果使用更大的利润，这种方法将崩溃。结果可能低于0像素。