如何在 d3.js 中更新条形图

How can I update a bar chart in d3.js?

本文关键字：更新 条形图 js d3      更新时间：2023-09-26

每当用户单击按钮时，我都会尝试更新 d3.js 条形图。

我一直在绑定在某处添加过渡，如下所示，但它不会即时更新我的数据。

我正在使用这个jsfiddle。

我已经尝试了类似于以下代码的内容，但它没有更新我的数据：

btn.onclick = function(){
  data.push({date: new Date(2013, 3, 10), total: 78});
  updatePlot();
}
function updatePlot(){
  d3.select('#graphTest').transition();
}

如何更改我的 updatePlot 方法，以便它更新条形图中的数据？

看起来你跳过了几个步骤。 D3实际上并没有在幕后为你做很多魔术。 您仍然需要推送数据并自己更新 DOM。 D3 只是提供了一个方便的编程模型来管理此过程。

因此，通过任何可视化，您都有以下有趣的部分：

  1. 数据数组
  2. DOM 节点
  3. 绑定到 DOM 节点的数据数组元素。
  4. DOM 节点上的属性和样式。

您的代码正在更新数据数组，但它不管理任何其他部分。 您需要将更新的数据驱动回 DOM（特别是使节点可见的属性/样式）。

因此，更新图将需要执行以下操作：

  1. 调用selection.data将新数据绑定到现有 DOM。 您可以定义一个键函数来控制数据映射到 DOM 节点的方式。
  2. 随心所欲地处理enter、exit和update选择。
  3. 根据新数据转换属性和样式。

对于#3，这不仅仅是调用selection.transition的问题，而是需要考虑要转换的属性和样式。 在转换上调用attr和style与在选择中调用它们完全相同，只是 DOM 使用内插值更新多次，而不是仅使用最终值更新一次。

为了更好地理解这个过程，你应该阅读使用联接思考和使用转换。

相关文章：