0

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

我一直想在某处添加一个过渡,如此处所示但它不会即时更新我的​​数据。

我正在使用这个jsfiddle

我试过类似下面的代码,但它没有更新我的数据:

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

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

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

4

1 回答 1

2

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

因此,对于任何可视化,您都会得到以下有趣的部分:

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

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

所以更新情节需要做以下事情:

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

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

为了更好地理解这个过程,您应该阅读Thinking with JoinsWorking with Transitions

于 2013-10-30T16:11:17.687 回答