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

葛兰明

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

我一直想在此处显示的地方添加过渡,但它不会即时更新我的​​数据。

我正在使用这个jsfiddle

我已经尝试过类似以下代码的内容,但是它不会更新我的数据:

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

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

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

斯科特·卡梅隆(Scott Cameron)

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

因此,通过任何可视化,您都会得到以下有趣的内容:

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

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

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

  1. 调用selection.data以将新数据绑定到现有DOM。您可以定义一个关键函数来控制数据如何映射到DOM节点。
  2. 处理enterexitupdate选择你喜欢的。
  3. 根据新数据转换属性和样式。

对于#3,这不仅仅是调用的问题selection.transition,而是您需要考虑要转换的属性和样式。在过渡上调用attrstyle就像在选择上调用它们一样,只不过DOM使用插值更新了很多次,而不是使用最终值更新了一次。

为了更好地理解此过程,您应该阅读“用联接思考”“使用过渡”

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

尝试更新d3.js中的条形图

来自分类Dev

尝试更新d3.js中的条形图

来自分类Dev

如何在d3中用附带的文本更新条形图?

来自分类Dev

d3.js(v3)enter()在条形图更新中不起作用

来自分类Dev

D3.js更新堆积的条形图

来自分类Dev

d3js堆积的条形图未更新

来自分类Dev

更新d3.js中的堆叠条形图(包括JSFiddle)

来自分类Dev

如何在 d3 v4 中制作可点击的过渡条形图?

来自分类Dev

如何在 d3 中绘制镜像 x 轴(倒置)条形图?

来自分类Dev

在d3js中创建基本的条形图

来自分类Dev

反转d3.js中堆积的条形图

来自分类Dev

d3.js中的简单条形图

来自分类Dev

D3.js中的分组条形图

来自分类Dev

D3.js 中不同条数的条形图

来自分类Dev

在D3中更新条形图以生成多个图表

来自分类Dev

在d3中更新条形图以生成多个图表

来自分类Dev

如何在d3.js中创建分层条形图

来自分类Dev

如何在d3.js中创建动态条形图?

来自分类Dev

使用d3 js的水平条形图

来自分类Dev

如何在c3.js中获得分组条形图(堆栈图)的圆角

来自分类Dev

缩放D3中堆积的条形图?

来自分类Dev

带有条形图的d3堆叠式条形图不会在过渡中更新

来自分类Dev

如何使用新数据更新d3.js条形图

来自分类Dev

如何在d3中的分组条形图数据的右侧显示第二个y轴

来自分类Dev

d3 js 圆形条形图,如何传递对象而不是 .csv 文件?

来自分类Dev

D3 条形图镜像

来自分类Dev

如何在c3.js中在x轴上制作倒置条形图

来自分类Dev

D3 v4 更新条形图不绘制最后一个条形图

来自分类Dev

如何在angular js中制作条形图和饼图?