Javascript 根据刻度值，如何更改图表的宽度

在X轴上，我试图以小时为基础绘制时间，如果时间段为2天，则在X轴上有48个刻度，在这种情况下，所有标签都重叠了，并且我在显示它们时遇到问题。问题是当刻度增加时，如何增加图表容器的宽度

  <svg width="900" height="200" class="graph1" #lineChart id="line-chart" 
  (window:resize)="onResize()"></svg>

  const svg = d3.select(element),
  margin = { top: 20, right: 40, bottom: 20, left: 60 },
  width = +svg.attr('width') - margin.left - margin.right,
  height = +svg.attr('height') - margin.top - margin.bottom;

  const x = d3.scaleTime().range([0, width - 20]);
  const y = d3.scaleLinear().range([height, 0]);


  if (this.aggregate === 'Hour' || this.aggregate === 'Day') {
  x.domain(
    d3.extent(yData, function(d) {
      return d.valueTs;
    })
  );
  }
   y.domain([
  d3.min(yData, function(d) {
    return d.value;
  }),
  d3.max(yData, function(d) {
    return d.value;
  })
  ]);

  if (this.aggregate === 'Hour') {
  g.append('g')
    .attr('class', 'axis axis--x')
    .attr('transform', 'translate(0,' + height + ')')
    .call(d3.axisBottom(x).ticks(d3.timeMinute.every(60)))
    .append('text')
    .attr('class', 'axis-title')
    .attr(
      'transform',
      'translate(' + width / 2 + ' ,' + (height + margin.bottom + 20) + 
  ')'
    )
    .style('text-anchor', 'end')
    .attr('fill', '#5D6971')
    .text('Time');
  }

const svg=d3.选择（元素），
边距={顶部：20，右侧：40，底部：20，左侧：60}，
宽度=+svg.attr（'width'）-margin.left-margin.right，
高度=+svg.attr（'height'）-margin.top-margin.bottom；
常量x=d3.scaleTime（）.range（[0，宽度-20]）；
常数y=d3.scaleLinear（）.range（[height，0]）；
如果（this.aggregate=='Hour'| | this.aggregate=='Day'）{
x、 领域(
d3.范围（yData，函数（d）{
返回d.valueTs；
})
);
}
y、 领域([
d3.最小值（yData，函数（d）{
返回d值；
}),
d3.最大值（yData，函数（d）{
返回d值；
})
]);
如果（this.aggregate=='Hour'）{
g、 附加（'g'）
.attr（'class'，'axis--x'）
.attr（'transform'，'translate（0'，+height+'））
.call（d3.axisBottom（x）.ticks（d3.timeMinute.every（60）））
.append（'文本'）
.attr（'class'，'axis title'）
艾特先生(
“转换”，
'平移（'+width/2+'，'+（height+margin.bottom+20）+
')'
)
.style（'text-anchor'，'end'）
.attr（'fill'，'5D6971'）
.文本（“时间”）；
}

这就是我目前能够做到的

---

例如，您可以根据静态宽度和数据长度计算宽度

var data = [{
    date: "1-May-12",
    close: "58.13"
}, {
    date: "30-Apr-12",
    close: "53.98"
}, {
    date: "27-Apr-12",
    close: "67.00"
}, {
    date: "26-Apr-12",
    close: "89.70"
}, {
    date: "25-Apr-12",
    close: "99.00"
}];

var width = 500 + data.length*50;

在本例中，data.length=5时，会将250px添加到静态长度。看看小提琴

---

如果您决定要更改x轴上的刻度数，这是一个很好的帖子：

例如，您可以根据静态宽度和数据长度计算宽度

var data = [{
    date: "1-May-12",
    close: "58.13"
}, {
    date: "30-Apr-12",
    close: "53.98"
}, {
    date: "27-Apr-12",
    close: "67.00"
}, {
    date: "26-Apr-12",
    close: "89.70"
}, {
    date: "25-Apr-12",
    close: "99.00"
}];

var width = 500 + data.length*50;

在本例中，data.length=5时，会将250px添加到静态长度。看看小提琴

---

如果您决定更改x轴上的刻度数，这是一篇好文章：

控制x轴刻度数如何？否则，如果你想显示每个刻度数字，如果有很多数据点，你可能会得到一个非常宽的图表。是的，我会使用滚动条，然后，我可以使用它，但在当前的情况下，我无法计算如何根据刻度数增加图表，假设如果刻度小于静态宽度，则刻度之间的宽度将很高，那么我如何动态增加图表宽度。请检查我的答案-这是否解决了您的问题？如果没有，如果您可以提供一个工作示例，例如jsfiddle，可能会有所帮助。控制x轴刻度的数量如何？否则，如果你想显示每个刻度数字，如果有很多数据点，你可能会得到一个非常宽的图表。是的，我会使用滚动条，然后，我可以使用它，但在当前的情况下，我无法计算如何根据刻度数增加图表，假设如果刻度小于静态宽度，则刻度之间的宽度将很高，那么我如何动态增加图表宽度。请检查我的答案-这是否解决了您的问题？如果没有，如果您可以提供一个有效的示例，例如JSFIDLE，这可能会有所帮助。但这不起作用，我的意思是宽度仍然会给我带来问题。我认为您需要根据刻度/数据点的数量动态设置图表的宽度。这就是上面的代码所做的。您可以通过更改data.length的静态宽度和系数来调整它。也许你可以创建一个jsfiddle来说明你的问题？当然@schustishuster，我会创建一个jsfiddle嘿，我已经尝试过这个方法了，你已经告诉我了，幸运的是这次成功了，问题是宽度，感谢你的努力。Schutischuster这不起作用，我的意思是宽度仍然给我带来了一个问题。我认为您希望根据刻度/数据点的数量动态设置图表的宽度。这就是上面的代码所做的。您可以通过更改data.length的静态宽度和系数来调整它。也许你可以创建一个jsfiddle来说明你的问题？当然@schustishuster，我会创建一个jsfiddle嘿，我已经尝试过这个方法了，你已经告诉我了，幸运的是这次成功了，问题是宽度，感谢你的努力。舒蒂舒斯特