Question

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

});

这是我尝试的代码。我尝试向g和x添加填充。它似乎不起作用。我只需要带有工具提示的水平单堆积条形图。我可以稍后添加工具提示，但我只需要有人帮助我解决这个问题。我为此一直努力太久了。以下是我正在使用的数据。

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

Answer 1

我找到的最简单的方法是从x轴映射对象（在您的情况下为 xScale ）获得的条形宽度中减去几个像素。您可以保持位置不变（x和y值）。因此，您可以更改此行：

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

像这样：

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

-2可以解决问题。

https://codepen.io/bemipefe/pen/ExyWeYm

在d3v4堆叠条形图中的堆叠之间添加空间？

1 个答案: