D3.js 如何更新任何d3js图表以显示实时数据？

我正在使用一个用于基本d3js条形图的模板，它可以很好地处理静态数据。但我需要用动态/实时数据更新它。 我需要使用此阵列中的数据：

数据：{date:date，signal:string，value:number}[]=[]

showChart(): void {
    if (!this.isChartShown) {
      this.isChartShown = true;

      const element = this.chartContainer.nativeElement;

      const svgElement = d3.select(this.chartContainer.nativeElement).append('svg')
      .attr('width', element.offsetWidth)
      .attr('height', element.offsetHeight);

      const contentWidth = element.offsetWidth - this.margin.left - this.margin.right;
      const contentHeight = element.offsetHeight - this.margin.top - this.margin.bottom;

      const x = d3
        .scaleBand()
        .rangeRound([0, contentWidth])
        .padding(0.1)
        .domain(this.data.map(d => d.date.toString()));

      const y = d3
        .scaleLinear()
        .rangeRound([contentHeight, 0])
        .domain([0, d3.max(this.data, d => d.value)]);

      const g = svgElement.append('g')
        .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

      g.append('g')
        .attr('class', 'axis axis--x')
        .attr('transform', 'translate(0,' + contentHeight + ')')
        .call(d3.axisBottom(x));

      g.append('g')
        .attr('class', 'axis axis--y')
        .call(d3.axisLeft(y).ticks(10, '%'))
        .append('text')
          .attr('transform', 'rotate(-90)')
          .attr('y', 6)
          .attr('dy', '0.71em')
          .attr('text-anchor', 'end')
          .text('Frequency');

      g.selectAll('.bar')
        .data(this.data)
        .enter().append('rect')
          .attr('class', 'bar')
          .attr('x', d => x(d.date.toString()))
          .attr('y', d => y(d.value))
          .attr('width', x.bandwidth())
          .attr('height', d => contentHeight - y(d.value));
    }
  }

---

如通用更新模式（示例）中所述，您应该考虑连接数据和DOM元素。你可以找到很多关于这个主题的资源和好例子

在您的情况下，您可以执行以下操作：

// This selection represents the update selection (DOM elements with matched data)
var barSelection = g.selectAll('.bar').data(this.data);

// The enter selection contains DOM elements that will match new unmatched data
barSelection.enter()
    .append('rect')
    .attr('class', 'bar')
    .attr('x', d => x(d.date.toString()))
    .attr('y', d => y(d.value))
    .attr('width', x.bandwidth())
    .attr('height', d => contentHeight - y(d.value));

// The exit selection contains DOM elements that are no longer matched with data
barSelection.exit()
    remove();

当然，每次

this.data

更改时，都需要调用此模式。由于大多数代码只应执行一次（图表初始化），因此最好将此部分移到另一个函数中，以便按需调用。这将要求您的

g

对象可以从该函数内部访问（您可以将其作为对象传递，或者为其分配一个id，并使用d3选择它）