Основываясь на значениях тиков, как я могу изменить ширину моего графика

Question

По оси X Я пытаюсь построить время на основе часов, если период времени составляет 2 дня, что составляет 48 тиков по оси X, в этом случае все метки перекрываются, и у меня возникают проблемыпоказывая их.Вопрос в том, как увеличить ширину контейнера графика при увеличении числа тиков.

  <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');
  }

Это то, чего я сейчас могу достичь!

https://i.stack.imgur.com/f5XIg.png

Answer 1

Вы можете рассчитать ширину на основе статической ширины и длины ваших данных, например

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 к вашей статической длине. Взгляните на скрипку http://jsfiddle.net/jdt9k6w8/1/.

Если вы решите, что хотите изменить количество тиков на оси x, это хороший пост: http://www.d3noob.org/2016/08/changing-number-of-ticks-on-axis-in.html