Question

我使用的是基本d3js条形图模板，该模板可以很好地处理静态数据。但我需要使用动态/实时数据进行更新。我需要使用此数组中的数据：

数据：{日期：日期，信号：字符串，值：数字} [] = []；

<RequestsCookieJar[<Cookie prov=11531d97-98e5-3af7-2bdf-76e3edeece3e for .stackexchange.com/>]>

Answer 1

如一般更新模式（示例here中所述），您应该考虑联接数据和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进行选择）。

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

1 个答案: