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

Question

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

我一直想在显示here的地方添加转换，但它不会动态更新我的数据。

我正在使用此jsfiddle。

我尝试过类似下面的代码，但它不会更新我的数据：

btn.onclick = function(){
  data.push({date: new Date(2013, 3, 10), total: 78});
  updatePlot();
}

function updatePlot(){
  d3.select('#graphTest').transition();
}

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

Answer 1

看起来你正在跳过几步。 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而不是使用最终值进行多次更新。

要更好地了解此过程，请阅读Thinking with Joins和Working with Transitions。