D3js，动态改变X轴的域

Question

我正在处理的当前项目有这个条形图，它有 x 轴和 y 轴。问题是，如果 X 轴的域从一开始就被初始化为从 0 到 10，即使我的数据长于 10，条形图也会覆盖图表的整个宽度。如果我有较小的数据并且域设置为 10（这比我现在拥有的数据高得多），这是示例。

如果我的数据高于我在后端设置的域，下面是图表：

它将离开 X 轴并且域仍然相同...

我的问题是：有什么方法可以将 x 轴的域初始化为我的数据的最大值或至少高于预期数据。因为我的数据是动态的，我永远不知道会有多少数据，所以如果我丢失了一些数据或不显示它们的真实数字，那将是一个大问题。

这也是我截取的代码：

var margin = { top: 5, right: 25, bottom: 25, left: 125 },
  width3 = 440 - margin.left - margin.right,
  height3 = 150 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg3 = d3
  .select('#graphic2')
  .append('svg')
  .attr('width', width3 + margin.left + margin.right)
  .attr('height', height3 + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var data = [
  { name: 'a', Number: 1 },
  { name: 'b', Number: 2 },
  { name: 'c', Number: 3 },
  { name: 'd', Number: 4 },
  { name: 'e', Number: 5 },
  { name: 'f', Number: 3 },
  { name: 'g', Number: 2 },
  { name: 'h', Number: 4 },
];

// Add X axis
var x3 = d3.scaleLinear().domain([0, 4]).range([0, width3]);
svg3
  .append('g')
  .attr('transform', 'translate(0,' + height3 + ')')
  .call(d3.axisBottom(x3))
  .selectAll('text')
  .style('text-anchor', 'end');

// Y axis
var y3 = d3
  .scaleBand()
  .range([0, height3])
  .domain(
    data.map(function (d) {
      return d.name;
    })
  )
  .padding(0.1);

svg3.append('g').call(d3.axisLeft(y3));

//Bars
svg3
  .selectAll('myRect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', 4)
  .attr('y', function (d) {
    return y3(d.name);
  })
  .attr('width', function (d) {
    return x3(d.Number);
  })
  .attr('height', y3.bandwidth())
  .attr('fill', function (d) {
    if (d.Number < 45) {
      return '#abd1e0';
    } else if (d.Number > 45 && d.Number < 55) {
      return '#76a1b3';
    } else {
      return '#33505c';
    }
  });

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="graphic2"></div>

Answer 1

你想要这个吗？

const numbers = data.map(d=>d.Number);
var x3 = d3.scaleLinear().domain(d3.extent(numbers))....

D3js，动态改变X轴的域

D3js, dynamically change the domain of X-axis

javascript

data-visualization

bar-chart

d3.js