javascript - 如何更新 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. 绑定(bind)到 DOM 节点的数据数组元素。
4. DOM 节点上的属性和样式。

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

因此更新绘图需要执行以下操作:

1. 调用selection.data将新数据绑定(bind)到现有DOM。您可以定义一个关键函数来控制数据如何映射到 DOM 节点。
2. 随心所欲地处理进入、退出和更新选择。
3. 根据新数据转换属性和样式。

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

要更好地理解这个过程，您应该阅读 Thinking with Joins和 Working with Transitions .