Question

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

这是我目前能够实现的！

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

基于刻度值，如何更改图表的宽度

1 个答案: